Skill822 estrellas del repoactualizado 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.

Ver fuente Repositorio: openagent

Instalar en Claude Code

Copiar

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

Después abre una sesión nueva de Claude Code; el skill carga automáticamente.

Definición

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

Del mismo repositorio

cloudflare-deploySkill

code_workbenchSkill

creativeSkill

Use when the user wants a less default, more original solution for code, design, writing, naming, architecture, debugging, or strategy, especially when progress is stuck.

develop-web-gameSkill