Skill822 repo starsupdated 5d ago

frontend-design

The frontend-design skill generates production-ready user interfaces with intentional visual hierarchy, cohesive typography, and deliberate color choices. Use it when building interfaces where aesthetic quality and user experience are priorities, requiring a clear design thesis applied consistently across desktop and mobile viewports rather than relying on default template components.

View source Repository: openagent

Install in Claude Code

Copy

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

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

Definition

skill.md

# Frontend Design

Use this skill for UI work where visual quality matters as much as functionality.

## Focus

- Pick one clear visual thesis before writing code
- Keep hierarchy obvious in the first viewport
- Make spacing, type scale, and color choices feel intentional
- Prefer cohesive composition over adding more component chrome

## Working approach

1. Identify the target mood and product context.
2. Choose a narrow palette and a consistent typography story.
3. Build the layout around one memorable focal point.
4. Add motion only if it improves comprehension or presence.
5. Validate the result for readability, balance, and polish.

## Output expectations

- Produce working frontend code, not just a concept
- Keep the result cohesive across desktop and mobile
- Avoid generic, template-like defaults
- Explain the design thesis briefly when presenting the result