skills.rest
hasanraiyan
hasanraiyanCOMMUNITY
Explore all skills by this author →
GitHub

app-design

Standardize app UI patterns and interaction behavior for src/app/apps pages.

12|2|Updated Oct 2, 2025
Search Tags:#ui conventions#tailwind styling#dropdown positioning#modal event handling#file upload progress#inline rename
One-click install
npx skills add https://github.com/hasanraiyan/resume --skill app-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: app-design
Source: https://github.com/hasanraiyan/resume/tree/main/.agent/skills/app-design
Command: npx skills add https://github.com/hasanraiyan/resume --skill app-design

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about app-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I stop a modal backdrop from triggering parent click events in Tailwind?▼

Prevent modal backdrop click propagation by applying stopPropagation rules to both the backdrop and panel elements. This ensures modal interactions do not trigger unintended parent click actions or misfire underlying UI components.

How do I fix clipped dropdown positioning when building app UI components?▼

Fix clipped dropdowns by implementing the fixed-position dropdown technique using getBoundingClientRect. This calculates exact anchor coordinates to ensure dropdown menus render fully visible within the viewport without being clipped by parent containers.

What is the best way to implement file upload progress and skeleton loading in a web app?▼

Implement file upload progress and skeleton loading by applying standardized app UX building blocks. These patterns handle live upload progress tracking and display skeleton placeholder states for list-based screens during data loading.

Why does my inline rename modal close immediately after clicking the input field?▼

Your inline rename modal closes because click events bubble to the backdrop. Applying stopPropagation rules to the modal panel and input prevents event bubbling, keeping the rename interface active during user interaction.

Does this app UI pattern standardization work for areas outside of src/app/apps?▼

The UI pattern standardization specifically targets pages built under src/app/apps. It applies Tailwind class conventions, layout shells, and interaction rules to this directory, requiring manual adaptation for use in other codebase locations.

Related Skills

Explore More Design & Creative Skills→
syeda-hoorain-alisyeda-hoorain-ali

nextjs-project-initialization-and-best-practices

Initialize and structure Next.js projects with TypeScript, Tailwind, and App Router.

Community
Intermediate
akashp1712akashp1712
1

next-loading-skeleton

Generate loading.tsx files with shadcn/ui Skeleton components for Next.js App Router pages.

Community
Intermediate
anilcancakiranilcancakir
5

tailwindcss-design

Translate Refactoring UI principles into Tailwind utility classes for UI design.

Community
Intermediate
SayBGMSayBGM

moai-library-shadcn

Implement and customize shadcn/ui components in React with Tailwind CSS.

Community
Advanced