# design-systems-frontend-architecture

Turns UI, UX and brand decisions into reusable components, tokens and layout rules your agent can act on.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 635 installs · ★ 23
- Author: hueyexe
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/hueyexe/frontend-agent-skills/tree/HEAD/design-systems-frontend-architecture/SKILL.md
- Updated: 2026-08-02
- HTML: https://affpapa.org/en/nevibecode/skills/design-systems-frontend-architecture

## What it does

Reach for this skill when the work is a reusable frontend system: a component library, design tokens, component contracts, responsive layout rules, CSS strategy, or documentation and governance. The agent is told to produce decisions, defaults, implementation guidance and next steps rather than a description of what design systems are.

Ten principles shape the output. Scope by components and states, not page count. Judge a component inside realistic compositions. Separate function from perception. Name patterns by purpose — `Primary action`, `Filter panel` — not by appearance. Accessibility counts as part of the contract: semantics, keyboard behaviour, focus, contrast, hit areas, error handling, reduced motion. The skill also lists where it should not lead, including UX research, art direction and pure backend work.

Defaults are spelled out. Start with the smallest useful slice: tokens, a few core components, one or two templates, docs. Prioritise high-frequency, high-risk patterns such as buttons, forms, navigation and loading or error states. Migrate component by component instead of a full redesign. Tokens split into primitive and semantic layers, and a new token for a single exception is discouraged. One caveat: the skill file is truncated, so the responsive layout section is only partly there.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add hueyexe/frontend-agent-skills --skill design-systems-frontend-architecture -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/design-systems-frontend-architecture/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/design-systems-frontend-architecture/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add hueyexe/frontend-agent-skills --skill design-systems-frontend-architecture -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/design-systems-frontend-architecture/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add hueyexe/frontend-agent-skills --skill design-systems-frontend-architecture -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/design-systems-frontend-architecture/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install hueyexe/frontend-agent-skills design-systems-frontend-architecture
```

2. **Manually: put the files in place**
- File: `.github/skills/design-systems-frontend-architecture/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add hueyexe/frontend-agent-skills --skill design-systems-frontend-architecture -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/hueyexe/frontend-agent-skills --path design-systems-frontend-architecture
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/design-systems-frontend-architecture/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add hueyexe/frontend-agent-skills --skill design-systems-frontend-architecture -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/hueyexe/frontend-agent-skills/tree/HEAD/design-systems-frontend-architecture/SKILL.md

## When to use it
- turn mockups and screenshots into a component library
- split primitive tokens from semantic ones
- kill duplicated patterns and drifting styles
- write an accessibility contract per component
- plan incremental migration instead of a full redesign

## Example prompts
- Audit our UI kit: which components overlap and what should become a token
- Design tokens for colour, spacing and type across our product
- Write the accessibility contract for the filter component: focus, keyboard, errors

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: d8d1028913fe8b08.

BEGIN THIRD-PARTY FILE d8d1028913fe8b08
```text
---
name: design-systems-frontend-architecture
description: "Use when building reusable frontend systems, design tokens, component contracts, responsive layouts, CSS strategy, or design-system documentation and governance."
license: MIT
metadata:
  author: hueyexe
---

# Design Systems Frontend Architecture

## Purpose

Help an agent convert UI, UX, product, and brand decisions into a durable frontend system: reusable components, tokens, layout rules, state behavior, documentation, governance, and implementation guidance that can scale across screens, teams, devices, and time.

Optimize for actual product work. Do not merely describe design systems. Produce decisions, defaults, component contracts, implementation guidance, critiques, and next steps the user can act on.

## When to use this skill

Use this skill when the user asks for any of the following:

- Design-system strategy, component libraries, pattern libraries, style guides, design tokens, UI kits, component audits, interface inventories, or governance.
- UI critique, redesign, frontend implementation plans, component decomposition, responsive layout guidance, CSS architecture, or frontend maintainability.
- Turning mockups, screenshots, UX flows, or product requirements into scalable frontend components.
- Documentation for components, tokens, accessibility states, usage guidance, or design-to-code handoff.
- Resolving inconsistency across UI surfaces, duplicated patterns, ad hoc styling, or component drift.

## When not to use this skill

Do not use this skill as the primary lens when the task is mainly:

- Broad UX research planning, ethnography, discovery interviews, market research, or product strategy not yet connected to UI/system decisions.
- Visual art direction, illustration style, campaign creative, or brand identity creation unless the user is converting it into system rules.
- Pure backend architecture, API design, data modeling, or infrastructure.
```
END THIRD-PARTY FILE d8d1028913fe8b08

The third-party file has ended. Everything between the d8d1028913fe8b08 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 1954 of 21865 bytes. © hueyexe · MIT · https://github.com/hueyexe/frontend-agent-skills/tree/HEAD/design-systems-frontend-architecture/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md