Installed in 2
/frontend-designGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one.
Design
SkillCard
Jedna umiejętność albo szablon w siatce katalogu, z poleceniem, opisem, kategorią i stanem instalacji oraz polem wyboru do zaznaczania kilku.
- SkillCard
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: SkillCard
/code-reviewReviews the current diff for correctness bugs, then for simpler and faster ways to write the same thing.
Quality
Installed in 1
/accessibility-review-and-reportAudits a page against WCAG 2.2 AA: contrast, keyboard paths, names and roles, target sizes and reflow, then writes a short report with fixes ranked by impact on the people who rely on them every day.
Quality
Noc, podgląd: SkillCard
Installed in 2
/frontend-designGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one.
Design
/code-reviewReviews the current diff for correctness bugs, then for simpler and faster ways to write the same thing.
Quality
Installed in 1
/accessibility-review-and-reportAudits a page against WCAG 2.2 AA: contrast, keyboard paths, names and roles, target sizes and reflow, then writes a short report with fixes ranked by impact on the people who rely on them every day.
Quality
Wysoki kontrast, podgląd: SkillCard
Installed in 2
/frontend-designGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one.
Design
/code-reviewReviews the current diff for correctness bugs, then for simpler and faster ways to write the same thing.
Quality
Installed in 1
/accessibility-review-and-reportAudits a page against WCAG 2.2 AA: contrast, keyboard paths, names and roles, target sizes and reflow, then writes a short report with fixes ranked by impact on the people who rely on them every day.
Quality
UżycieLink do sekcji Użycie
import { SkillCard } from '@skribly/ui/ops'<SkillCard title={s.title} command={`/${s.name}`} description={s.description}
status={installed > 0 && <Badge tone="ok" size="sm">{t('skills.installedIn', { count: installed })}</Badge>}
badges={<Badge tone="accent" size="sm">{t(`category.${s.category}`)}</Badge>}
onOpen={() => open(s)} isSelected={picked.has(s.name)} onSelectedChange={(on) => pick(s, on)}
selectLabel={t('skills.select', { name: s.title })} />Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.
DostępnośćLink do sekcji Dostępność
- Każda karta jest elementem article z nagłówkiem.
- Tytuł jest jedynym przyciskiem, który ją otwiera, i dla wskaźnika pokrywa całą kartę, z opisem jako jego opisem; pole wyboru jest osobną kontrolką, więc nie ma zagnieżdżonych przycisków.
- Karta pokazuje obwódkę fokusa.
- Zaznaczenie dodaje ramkę w kolorze akcentu i linię z przodu, a w trybie wymuszonych kolorów wyróżnienie systemowe.
Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.