Individual skill

frontend-design

Build distinctive, production-grade frontend interfaces with high design quality, guided by named aesthetic philosophies. Use when building components, pages, or applications. Generates working code with exceptional attention to aesthetic details and creative choices that avoid generic AI output.

frontend-design/SKILL.md

Read pinned source

Source commit c259656c76d9758d7ead46b0d2f125cbe84f8665

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: No
Repository scan complete: Yes
Skill scan complete: Yes
Observed behavior: Not checked yet
Last checked: Nov 10, 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): 602
Repository last updated: Jul 6, 2026
License: Apache-2.0

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

design 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 · 11,821 bytes

Read excerpt


This skill guides creation of distinctive, production-grade frontend interfaces. Implement real working code with exceptional attention to aesthetic detail.

## Example prompts

- "Build the hero section from the brief"
- "Create a card component in a Scandinavian style"
- "I want this to feel like a Japanese magazine. Build the layout."
- "Build the settings page. Use whatever style fits."

## Before You Write Any Code

1. **Explore the existing codebase first.** Scan specifically for:
   - **Component directories**: `components/`, `ui/`, `shared/` and list every component by name and its props/API
   - **CSS variables / tokens**: files named `tokens.css`, `variables.css`, `theme.css`, or `:root` declarations with custom properties