frontend-dev

name: frontend-dev description: Frontend delivery skill for deliberate, production-quality interfaces with strong implementation discipline license: MIT compatibility: opencode metadata: audience: developers workflow: frontend

Frontend Development Skill

Use This Skill For

• React, Next.js, and component-driven UI work
• visual refinement and interaction design
• responsive layouts, accessibility, and motion
• component library integration and page assembly

Do Not Use This Skill For

• backend service logic
• container, CI, or deployment changes

Default Workflow

1. Inspect the existing design language before changing UI.
2. Check official docs for framework and component APIs.
3. Identify whether the change is visual, behavioral, or architectural.
4. Implement only the required UI surface.
5. Verify layout, semantics, and breakpoints.

UI Standards

• Produce intentional, non-generic interfaces.
• Match the existing product language unless the task is a redesign.
• Use strong hierarchy, spacing, and typography.
• Avoid decorative excess that hides weak structure.
• Use animation only when it reinforces clarity.

Libraries and Patterns

• Use context7 for React, Next.js, Tailwind CSS, shadcn/ui, and motion libraries.
• Use gh_grep when you need real implementation patterns, not as a substitute for docs.
• Respect framework boundaries such as server vs client components.

Accessibility and Performance

• Preserve keyboard access.
• Maintain or improve contrast.
• Use semantic HTML when possible.
• Avoid unnecessary client-side complexity.

Visual Constraints

• No emoji-based UI unless the user explicitly asks for it.
• Prefer professional icon systems.
• Avoid default-looking AI-generated layouts.
• Use gradients sparingly and intentionally.

Done Criteria

• the UI fits the existing product or requested direction
• interactions are clear and not brittle
• responsive behavior is addressed
• implementation details are consistent with the framework in use