Skip to content
cccskills
FreePublished on GitHub

frontend-ui-engineering

Build and refine web UI—component structure, responsive layout, design tokens, state, and accessibility. Use for feature UI work beyond WCAG checks alone.

The English summary is being prepared. Showing the original description.

See how to install

Files included (1)

  • SKILL.md1.8 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Frontend UI Engineering

End-to-end UI implementation: structure, styling, responsive behavior, state, and accessibility. Extends frontend-ui-accessibility with architecture and design-system discipline.

When to use

  • New page, form, or interactive component
  • Refactoring UI for consistency or responsiveness
  • Applying or extending a design system

When not to use

  • Backend-only change
  • Accessibility audit only (use frontend-ui-accessibility)
  • Full visual redesign exploration (consider design consultation workflows)

Workflow

  1. Inventory — existing components, tokens, patterns to reuse
  2. Structure — semantic HTML; split presentational vs container components
  3. Layout — mobile-first breakpoints; avoid fixed widths that break small screens
  4. State — local vs shared; minimize prop drilling; document async/loading/error UI
  5. Styling — tokens (color, spacing, type); no magic numbers scattered
  6. A11y — keyboard, focus, labels, contrast (see frontend-ui-accessibility)
  7. Verify — key viewports; critical user paths; no console errors

Checklist

AreaCheck
ComponentsSingle responsibility; reusable primitives
ResponsiveWorks at 320px and desktop; touch targets adequate
Loading/empty/errorAll three states designed
PerformanceAvoid unnecessary re-renders; lazy-load heavy assets
A11yFocus order, ARIA only when needed, form labels

Output

  • Implemented components with consistent patterns
  • Brief note on new tokens or patterns added to the design system

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

"Implement and select ad bidding strategies from manual CPC to automated target-CPA and target-ROAS. Use this skill when the user needs to choose a bidding strategy, set up automated bidding, or optimize bid parameters — even if they say 'what bidding strategy should I use', 'target CPA setup', or 'smart bidding configuration'.".

The English summary is being prepared. Showing the original description.

charlieviettq/awesome-agent-skill26Updated Jul 20, 2026

"Optimize advertising budget allocation across campaigns using marginal returns analysis. Use this skill when the user needs to distribute budget across multiple campaigns, optimize spend pacing, or maximize overall ROAS under budget constraints — even if they say 'how to split my ad budget', 'campaign budget optimization', or 'diminishing returns on ad spend'.".

The English summary is being prepared. Showing the original description.

charlieviettq/awesome-agent-skill26Updated Jul 20, 2026

"Build CTR prediction models for estimating ad click-through rates from features. Use this skill when the user needs to predict click probability, build an ad ranking model, or evaluate ad creative performance — even if they say 'predict click rate', 'ad relevance scoring', or 'which ad will get more clicks'.".

The English summary is being prepared. Showing the original description.

charlieviettq/awesome-agent-skill26Updated Jul 20, 2026

"Implement Generalized Second Price auction for ad slot allocation and pricing. Use this skill when the user needs to understand search ad auctions, compute ad positions and costs-per-click, or analyze bidding dynamics — even if they say 'how does Google Ads auction work', 'ad rank calculation', or 'second price auction for ads'.".

The English summary is being prepared. Showing the original description.

charlieviettq/awesome-agent-skill26Updated Jul 20, 2026

"Implement VCG mechanism for incentive-compatible ad slot allocation with truthful bidding. Use this skill when the user needs to design a truthful auction mechanism, compute externality-based payments, or understand why platforms may prefer GSP over VCG — even if they say 'truthful auction design', 'VCG payments', or 'incentive-compatible mechanism'.".

The English summary is being prepared. Showing the original description.

charlieviettq/awesome-agent-skill26Updated Jul 20, 2026

"Explain blockchain fundamentals including distributed ledger architecture, consensus mechanisms, and block structure. Use this skill when the user needs to understand blockchain concepts, evaluate whether blockchain fits a use case, or design a blockchain-based solution — even if they say 'how does blockchain work', 'do I need blockchain', or 'distributed ledger'.".

The English summary is being prepared. Showing the original description.

charlieviettq/awesome-agent-skill26Updated Jul 20, 2026

See all skills by charlieviettq

Report a problem with this skill