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

Ver fuente Repositorio: openagent

Instalar en Claude Code

Copiar

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

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

Definición

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.

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