Agent skill · luongnv89
frontend-design
Build production-grade frontend interfaces with distinctive aesthetics and working code. Use for UI components, pages, or frontend features. Don't use for backend/API work or usability-only audits.
What it needs
About 7k tokens when loaded.
What this skill does
Frontend Design Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. When to Use Trigger this skill when the user asks to: Build a UI component, page, or full frontend application Design or implement a frontend feature (navigation, forms, data tables, dashboards) Redesign an existing interface for better aesthetics or usability Convert a mockup, wireframe, or spec into working code Instructions 1. Clarify the requirements (component type, framework, target audience, design constraints) 2. Propose an aesthetic direction and get user approval before coding 3. Implement the full working code with distinctive visual choices 4. Validate responsiveness and accessibility basics 5. Deliver the code with inline annotations for key design decisions Repo Sync Before Edits (mandatory) Before creating/updating/deleting files in an existing repository, sync the current branch with remote: If the working tree is not clean, stash first, sync, then restore: If origin is missing, pull is unavailable, or rebase/stash conflicts occur, stop and ask the user before continuing. Design Thinking Before coding, understand the context and commit to a BOLD aesthetic direction: Purpose: What problem does this interface solve? Who uses it? Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction. Constraints: Technical requirements (framework, performance, accessibility). Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember? CRITICAL: Choose a clear conceptual direction and execute it with precision. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills luongnv89/frontend-design