Claude Skills

Reusable AI instructions, tuned for this project

These skill files live in .claude/skills/ and encode this project's conventions — component patterns, token rules, navigation wiring, and more. Invoke any skill by name in Claude Code and it follows the exact steps without re-explanation each session. Download any skill to adapt it for your own project.

widgetsnew-component

Scaffolds a new design system component with all three required files — a typed React component, a token-only CSS stylesheet, and a Storybook stories file. Enforces the ds- BEM naming prefix, semantic token usage, and the correct stories format without needing reminders.

Invoke:add a [Name] componentcreate a [Name] componentscaffold [Name]

insert_drive_filenew-page

Creates a new website page with the full standard layout shell (Header, Sidebar, BlurBackground, Footer, PageLinks) and automatically wires it into the navigation config. Prevents the common mistake of adding a route without updating the sidebar.

Invoke:add a page for [X]create a [section] pageadd [X] to the site

previewvisual-review

Starts the Next.js dev server, navigates to specified pages, and screenshots them in both light and dark mode. Checks for invisible text, broken layouts, overflow, and stuck hover states — then reports findings or confirms all clear.

Invoke:check how this looksreview light and darkvisual checkscreenshot the page

manage_searchtoken-audit

Scans CSS files for hardcoded hex colours, raw rgb() values, and pixel values that should reference design tokens. Reports file, line number, offending value, and recommended token replacement. Accepts a single component, all-components, or website as scope.

Invoke:check for hardcoded valuestoken auditaudit [component] CSSare there raw colours

rocket_launchpre-deploy

Runs both the component library build (Vite + TypeScript) and the website build (Next.js) before a push to Vercel. Knows the non-standard monorepo build order and watches for SSR-unsafe code, portal regressions, and static generation failures.

Invoke:is this ready to push?run the buildpre-deploy checkcheck before I push

articlecomponent-doc-page

Creates a full-quality documentation page for a design system component on the website. Reads the component's props to generate a variant showcase grid (the Button page is the benchmark), writes all three page files, and wires navigation.

Invoke:document [X] on the websiteadd a docs page for [X]create the website page for [X]

fact_checkheuristic-analysis

Evaluates a page or component against Nielsen's 10 Usability Heuristics. Takes screenshots in light and dark mode, reads the source code, then produces a structured findings table with severity ratings (Pass / Minor / Moderate / Critical) and specific fix suggestions.

Invoke:heuristic analysis of [page]UX review of [page]usability check on [component]

accessibilityaccessibility-audit

Audits a component or page against WCAG 2.1 AA criteria. Checks semantic HTML, ARIA usage, keyboard navigation, focus styles, and colour contrast via both source code analysis and live screenshots. Reports file and line-level findings with WCAG criterion and severity.

Invoke:accessibility audita11y check on [component/page]check WCAG complianceis [X] accessible

compareapi-consistency

Reads all component Props interfaces and flags inconsistencies across the library: mixed boolean naming (disabled vs isDisabled), mismatched size enums, missing standard props (className, disabled), and structural mismatches within component families. Produces a grouped findings report prioritised by breaking impact.

Invoke:review component APIsprop consistency auditare our component props consistentcheck for API inconsistencies