Skill822 repo starsupdated 5d ago

frontend-skill

The frontend-skill guides visual design and implementation for user interfaces by prioritizing composition, hierarchy, and spacing over component complexity. Use it when building landing pages, prototypes, or app surfaces that need deliberate, premium aesthetics rather than purely functional layouts, following a process that establishes visual direction first, then adds only necessary components to support that vision.

View source Repository: openagent

Install in Claude Code

Copy

git clone --depth 1 https://github.com/Haohao-end/openagent /tmp/frontend-skill && cp -r /tmp/frontend-skill/api/internal/core/skills/catalog/frontend-skill ~/.claude/skills/frontend-skill

Then start a new Claude Code session; the skill loads automatically.

Definition

skill.md

# Frontend Skill

Use this skill when the task depends on visual hierarchy, spacing, composition, imagery, and motion more than on component count.

## When to use

- Building or refining a landing page, app surface, prototype, demo, or game UI
- A screen needs to feel deliberate, premium, and current
- The request is about visual quality, not just functional completion

## Working approach

1. Define a visual thesis in one sentence.
2. Write a short content plan: hero, support, detail, final CTA.
3. Decide 2-3 interaction ideas that meaningfully change the feel.
4. Build from composition first, then add components only when needed.

## Design principles

- Prefer strong layout, scale, and cropping before adding chrome.
- Keep the first viewport simple and memorable.
- Use a small color system and no unnecessary decoration.
- Remove cards or borders if plain layout is clearer.
- Make the main message readable at a glance.

## Output expectations

- If the user asked for implementation, give a concrete front-end plan.
- If the user asked for critique, call out hierarchy, spacing, motion, and clutter.
- If the user asked for code, keep the result consistent with the visual direction above.