app-design
CommunityShip consistent app UI patterns faster.
Design & Creative#ui conventions#tailwind styling#dropdown positioning#modal event handling#file upload progress#inline rename
Authorhasanraiyan
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill solves the inconsistency and UI bugs that happen when building apps in the codebase without shared design conventions, leading to broken dropdowns, modals that misfire clicks, and duplicated styling.
Core Features & Use Cases
- Color, fonts, and layout conventions: Apply the documented palette and typography plus the standard sidebar + mobile nav shell for
src/app/apps/. - Interaction bug fixes: Use the correct positioning and event handling patterns to avoid clipped dropdowns and modal/backdrop click propagation issues.
- App UX building blocks: Implement common patterns for inline rename modals, file uploads with live progress, and skeleton loading for empty/loading states.
Quick Start
Use the app-design Skill to update the UI and interactions for a new or modified app under src/app/apps/ by following the color palette, layout shell, dropdown/modal event rules, and the component patterns for rename, uploads, and skeleton loading.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: app-design Download link: https://github.com/hasanraiyan/resume/archive/main.zip#app-design Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.