# Build Accessible Design Systems

Teams often create inconsistent UI because tokens, components, and accessibility rules are not defined together. This skill provides a practical starter framework for reusable design systems across product teams.

## Install

```bash
npx skillstore add ai agent hub/ariegoldkin-design-system-starter
```

## Metadata

- - Slug: ariegoldkin-design-system-starter
- - Version: 1.0.0
- - Author: AI Agent Hub
- - GitHub username: ArieGoldkin
- - License: MIT
- - Repository: https://github.com/ArieGoldkin/ai-agent-hub/tree/main/skills/design-system-starter
- - Ref: main
- - Supported tools: Claude, Codex, Claude Code
- - Risk level: low
- - Quality score: 73
- - Public page: https://skillstore.pages.dev/skills/ariegoldkin-design-system-starter
- - Manifest: https://skillstore.pages.dev/api/skills/ariegoldkin-design-system-starter/manifest

## Capabilities

- Defines primitive and semantic design token structures for colors, typography, spacing, radii, and shadows.
- Provides React component examples for buttons, forms, cards, modals, navigation, and theme toggles.
- Explains component architecture using atoms, molecules, organisms, templates, and pages.
- Includes accessibility guidance for contrast, keyboard navigation, ARIA attributes, and screen reader support.
- Supplies a design system audit checklist covering components, documentation, tooling, theming, and governance.
- Offers reusable templates for component implementation and W3C-style design token files.

## Use Cases

- Start a Product Design System: Create the first token hierarchy, component inventory, and documentation plan for a new product UI.
- Standardize Frontend Components: Use the React templates and examples to align component APIs, variants, accessibility, and styling conventions.
- Audit an Existing UI Library: Apply the checklist to identify missing tokens, weak documentation, accessibility gaps, and governance issues.

## Prompt Templates

### Create Token Basics

```
Help me define a starter design token structure for a web app. Include colors, typography, spacing, radii, and shadows.
```

### Plan Component Architecture

```
Use the design system starter to propose atoms, molecules, organisms, and page templates for my product dashboard.
```

### Improve Accessibility Coverage

```
Audit these planned components for WCAG 2.1 AA concerns. Focus on contrast, keyboard navigation, labels, and ARIA usage.
```

### Modernize an Existing System

```
Evaluate my current component library and produce a migration plan for tokens, component APIs, theming, documentation, and governance.
```

## Limitations

- It provides guidance and templates, not a complete installable component package.
- Examples are React-oriented and may need adaptation for Vue, Angular, or native platforms.
- It does not automatically validate accessibility or visual regression results.
- Brand strategy, visual identity, and Figma files must be supplied by the user or team.

## Best Practices

- Start with semantic tokens so brand changes do not require component rewrites.
- Document accessibility behavior with every component, including keyboard support and screen reader expectations.
- Version changes clearly and provide migration notes before teams adopt breaking updates.

## Anti Patterns

- Do not hardcode brand colors directly inside every component.
- Do not ship components without disabled, loading, focus, error, and empty states.
- Do not treat documentation as optional after implementation is complete.

## Security Audit

- - Safe to publish: true
- - Audited at: 2026-06-28T09:47:44.607\+00:00
- - Summary: Static analysis reported many high-risk patterns, but context review found documentation examples, Markdown code fences, relative imports, design token color values, and public reference URLs. No malicious intent, credential access, command execution, data exfiltration, or prompt injection evidence was found. The only notable behavior is a benign example that stores a theme preference in localStorage.

## Stats

- - Views: 297
- - Downloads: 6
- - Favorites: 0
- - Popularity score: 0