Individual skill

design-systems-frontend-architecture

Use when building reusable frontend systems, design tokens, component contracts, responsive layouts, CSS strategy, or design-system documentation and governance.

design-systems-frontend-architecture/SKILL.md

Read pinned source

Source commit 2841c079dd8a9c634882227194dc42e25227710d

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: No
Repository scan complete: No
Skill scan complete: No
Observed behavior: Not checked yet
Last checked: Nov 6, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 24
Repository last updated: Aug 2, 2026
License: MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

accessibility Repository topic
agent-skills Repository topic
ai-agents Repository topic
ai-skills Repository topic
claude-code Repository topic
cursor Repository topic
design-systems Repository topic
frontend Repository topic
opencode Repository topic
ui-design Repository topic
engineering Derived category
design Derived category
docs Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

SKILL.mdcore · 21,865 bytes
SKILL.mdcore · 21,865 bytes
SKILL.mdcore · 21,865 bytes
SKILL.mdcore · 21,865 bytes
references/anti-patterns.mddoc · 10,913 bytes
references/checklists.mddoc · 9,492 bytes
references/decision-prompts.mddoc · 18,023 bytes
references/principle-cards.mddoc · 14,235 bytes

Read excerpt


# 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.