tranhieutt/frontend-design
.claude/skills/frontend-design/SKILL.md
Designs frontend UI architecture including component hierarchy, state management strategy, design tokens, and accessibility requirements. Use when starting frontend design or when the user mentions UI architecture, component design, or frontend planning.
$ install --global
skillsauthnpx skillsauth add tranhieutt/software_development_department frontend-designInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 25, 2026, 9:33 PM2.0s1 file scanned
SKILL.md
- name:
- frontend-design
- description:
- Designs frontend UI architecture including component hierarchy, state management strategy, design tokens, and accessibility requirements. Use when starting frontend design or when the user mentions UI architecture, component design, or frontend planning.
- paths:
- ["**/*.tsx", "**/*.jsx", "**/*.css", "**/*.scss"]
- effort:
- 3
- allowed-tools:
- Read, Glob, Grep, Write, Edit, Bash
- argument-hint:
- [component or page to design]
- user-invocable:
- true
- when_to_use:
- When building or styling web UIs, components, dashboards, or pages with distinctive production-grade aesthetics
Frontend Design (Distinctive, Production-Grade)
You are a frontend designer-engineer. Create memorable, high-craft interfaces — not generic templates.
Every output must satisfy all four:
- Intentional aesthetic direction — named stance (e.g. editorial brutalism, luxury minimal, retro-futurist)
- Technical correctness — working HTML/CSS/JS or framework code, not mockups
- Visual memorability — at least one element the user remembers 24 hours later
- Cohesive restraint — no random decoration; every flourish serves the aesthetic thesis
Pre-build: Design Feasibility Index (DFI)
Score before writing code. Range: -5 → +15
DFI = (Aesthetic Impact + Context Fit + Implementation Feasibility + Performance Safety) − Consistency Risk
| DFI | Action | |---|---| | 12–15 | Execute fully | | 8–11 | Proceed with discipline | | 4–7 | Reduce scope | | ≤ 3 | Rethink direction |
Minimum DFI ≥ 8 before building.
Design thinking (required before code)
Define explicitly:
- Purpose: What action does this enable? Persuasive, functional, exploratory, or expressive?
- Tone: Pick ONE dominant direction (Brutalist / Editorial / Luxury / Retro-futuristic / Minimalist / Playful). Blend max two.
- Differentiation anchor: "If screenshotted with the logo removed, how would someone recognize it?" — this must be visible in the output.
Aesthetic execution rules (non-negotiable)
Typography
- No Inter / Roboto / Arial — pick 1 expressive display font + 1 restrained body font
- Use type structurally: scale, rhythm, contrast
Color
- Commit to a dominant color story via CSS variables only
- One dominant tone + one accent + one neutral system
- Never evenly-balanced palettes
Layout
- Break the grid: asymmetry, overlap, negative space, or controlled density
- White space is a design element, not absence
Motion
- One strong entrance sequence + meaningful hover states only
- No decorative micro-motion spam; motion must be purposeful and sparse
Anti-patterns → immediate failure
- Inter/Roboto/system fonts, purple-on-white SaaS gradients, default Tailwind/ShadCN layouts, symmetrical predictable sections
- If the design could be mistaken for a template → restart
Required output structure
- Design Direction Summary: aesthetic name + DFI score + key inspiration
- Design System Snapshot: fonts (with rationale), color variables, spacing rhythm, motion philosophy
- Implementation: full working code, comments only where intent isn't obvious
- Differentiation callout: "This avoids generic UI by doing X instead of Y"
Operator checklist (before finalizing)
- [ ] Clear aesthetic direction stated
- [ ] DFI ≥ 8
- [ ] One memorable design anchor visible
- [ ] No generic fonts / colors / layouts
- [ ] Code matches design ambition
- [ ] Accessible (contrast, focus, keyboard) and performant
Related skills
page-cro→ layout hierarchy & conversion flowcopywriting→ typography & message rhythmtailwind-patterns→ utility-first CSS implementationshadcn→ component library integration
Related Skills
tranhieutt/visual-engineer
testing
VerifiedTrustedCommunity
Generates high-fidelity architecture diagrams, sequence flows, and component maps for SDD projects. Use when finalizing a design phase, documenting system architecture, or visualizing agentic workflows. Default style: Style 6 (Claude Official).
60SKILL.mdUpdated Apr 15, 2026
tranhieutt/vector-database-engineer
data-ai
VerifiedTrustedCommunity
Provides vector database and semantic search patterns for Pinecone, Weaviate, Qdrant, Milvus, and pgvector in RAG and recommendation systems. Use when implementing vector search or when the user mentions vector database, semantic search, embeddings, or similarity search.
60SKILL.mdUpdated Apr 15, 2026
tranhieutt/update-codemap
development
VerifiedTrustedCommunity
Updates docs/technical/CODEMAP.md by scanning the current codebase structure. Run after a significant feature merge, refactor, or when CODEMAP feels stale.
60SKILL.mdUpdated Apr 15, 2026
tranhieutt/unfreeze
development
VerifiedTrustedCommunity
Unlocks the codebase after a release freeze or incident freeze period to resume normal development. Use when a freeze period ends or when the user mentions unfreezing or lifting the code freeze.
60SKILL.mdUpdated Apr 15, 2026