Installed in 2
/frontend-designGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one.
Design
SkillCard
One skill or template in a catalogue grid, with its command, description, category and install state, and a checkbox to pick several.
- SkillCard
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, 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
Dark theme, 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
High contrast theme, 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
UsageLink to the section Usage
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 })} />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- Each card is an article with a heading.
- The title is the one button that opens it and covers the card for pointers, with the description as its description; the checkbox is a separate control, so there are no nested buttons.
- The card shows the focus ring.
- Selection adds an accent border and a leading rule, and the system highlight in forced colours.
This demo runs through axe in all three themes on every test run. See what the tests check.