frontend-design
Frontend Design Skill
Create distinctive, production-grade frontend interfaces using systematic UI/UX principles.
Quick Answers
| Question | Answer |
|---|---|
| What matters here? | User needs FIRST, then accessibility, conventions, visual hierarchy |
| What can go wrong? | Designing without understanding users, poor accessibility, inconsistent states |
| Fastest correct path? | Think (understand) → Plan (decide) → Build (implement) → Validate (test) |
| How do I know I'm done? | User problem solved, WCAG compliant, conventions followed, states complete |
PHASE 1: THINK (Mandatory Discovery)
STOP. Do NOT write any code until these questions are answered.
More from mumerrazzaq/claude-code-skills-lab
upwork-proposal
|
85chatkit
Build AI chat applications with OpenAI ChatKit SDK. Use when creating chat UIs, multi-session systems, integrating AI agents (OpenAI, Gemini, Claude, Ollama), adding tools with MCP, widgets, or building conversational apps. Covers server setup, Store implementations, frontend integration (@openai/chatkit-react), function tools, MCP servers, multi-user sessions, and streaming responses.
4message-reply
Draft professional replies to received messages across platforms (LinkedIn, Fiverr, Upwork, Interview, Email, WhatsApp). This skill should be used when the user pastes a received message and needs a reply draft, or says "reply to this", "draft a response", "help me respond to".
3better-auth
Integrate better-auth into Next.js 16 apps. Use for email/password, social OAuth, magic links, passkeys, 2FA setup. Covers database adapters (Prisma/Drizzle), session management, and route protection.
3linkedin-content
Create LinkedIn posts, bios, comments, and articles that sound authentically human. This skill should be used when the user wants to write LinkedIn content, says "write a post", "update my bio", "comment on this", or "draft an article".
2