skills.rest
BumpyClock
BumpyClockCOMMUNITY
Explore all skills by this author →
GitHub

frontend-developer

Generate production-grade frontend interfaces with React, Vue, or HTML/CSS.

1|1|Updated Jun 2, 2025
Search Tags:#design#ui#frontend#react#component#aesthetics
One-click install
npx skills add https://github.com/BumpyClock/dotfiles --skill frontend-developer-bumpyclock
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-developer
Source: https://github.com/BumpyClock/dotfiles/tree/main/.ai_agents/skills_archive/frontend-developer
Command: npx skills add https://github.com/BumpyClock/dotfiles --skill frontend-developer-bumpyclock

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create distinctive, production-grade frontend interfaces with high design quality, enabling delivery of polished web components, pages, and UI artifacts.

Core Features & Use Cases

  • Production-grade code generation for web components, pages, dashboards, and UI patterns.
  • Design-system alignment, token reuse, and aesthetic direction to avoid generic aesthetics.
  • Use Case: Create a visually striking landing page or component library with a cohesive look and responsive behavior.

Quick Start

Describe your frontend requirements and constraints, and I will generate production-grade components or pages ready to integrate.

Frequently Asked Questions about frontend-developer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate production-grade React components with design tokens?▼

To generate production-grade React components with design tokens, describe your frontend requirements and constraints to receive ready-to-integrate code aligned with your design system. The output ensures aesthetic direction and responsive behavior.

Can I use this to build UI patterns for both React and vanilla HTML?▼

Yes, you can build UI patterns for React, Vue, or vanilla HTML/CSS. The generation process accommodates these frameworks while maintaining adherence to accessibility guidelines and responsive layouts.

How do I avoid generic aesthetics when creating a landing page?▼

To avoid generic aesthetics when creating a landing page, apply design-system alignment and token reuse. This ensures a cohesive, visually striking look with high design quality across all web components.

What is the best way to create a cohesive component library?▼

The best way to create a cohesive component library is to specify your aesthetic direction and constraints upfront. This generates production-grade code with unified responsive behavior and accessibility standards.

Does this frontend UI generation support performance optimization?▼

Yes, frontend UI generation requires adherence to performance optimization alongside accessibility guidelines and responsive layouts. This ensures the delivered web components and dashboards meet production-grade standards.

Why do my generated web components lack design-system alignment?▼

Generated web components lack design-system alignment when specific design tokens and aesthetic constraints are not provided. Describe your exact frontend requirements to ensure proper token reuse and cohesive visual output.

Related Skills

Explore More Design & Creative Skills→
sakamoto-family-smilesakamoto-family-smile

frontend-design-direction

Guide frontend teams to define design direction for production web interfaces.

Community
Advanced
tanaka-mambingetanaka-mambinge

audit

Audit UI codebases for accessibility, performance, theming, and responsive issues.

Community
Advanced
nguyenthienthanhnguyenthienthanh
24

design-expert

Provides expert guidance on UI/UX design, design systems, and responsive layouts.

Community
Basic
suhwansuhwan

phase-3-mockup

Generate HTML/CSS/JS mockups with a Next.js conversion plan.

Community
Advanced