modern-ui-page
Modern UI Page
Quick Start
- Confirm page scope
- This skill is for a full page or page-sized surface, not an entire app or design system.
- If the request is broader, implement one page first.
- Understand the page before coding
- What is the page for?
- Who is it for?
- What is the primary action?
- What content or sections are required?
- Choose a visual direction
- Pick a clear aesthetic instead of defaulting to generic SaaS UI.
- Favor memorable composition, typography, color, and spacing.
- Keep visuals subordinate to readability and navigation.
More from iamkhan21/skills
frontend-init
Standardizes an already-scaffolded frontend TypeScript web app with baseline tooling, structure, and conventions. Use when setting up or aligning pnpm + TypeScript strict + path aliases, Vitest, Oxc (oxlint/oxfmt), and a progressive FSD-style folder layout, or when the user asks about initial project rules and UI library choices.
9react-testing
Testing React components, hooks, and interactions with React Testing Library. Use when writing new tests, debugging failing tests, refactoring test code, setting up test infrastructure, mocking APIs in React tests, or when the user mentions Jest/Vitest with React, `render`, `screen`, `userEvent`, `waitFor`, `findBy`, MSW, or testing patterns. Also use when the user asks how to test a specific React component or hook, even if they don't mention "testing library" explicitly.
8refactoring
Apply systematic code refactoring with small steps, clear boundaries, and proven techniques. Use when improving existing code, reducing technical debt, cleaning up legacy code, or when user mentions refactoring, code cleanup, or code improvement.
5typescript-refactoring
Use this skill when improving existing TypeScript or JavaScript code without intentionally changing product behavior. Reach for it whenever the user says a file or module is too big, messy, brittle, hard to test, full of duplication, deeply nested, over-coupled, confusingly named, legacy, or in need of cleanup, restructuring, simplification, or technical-debt reduction. Also use it when the user asks how to safely split a large component, untangle a service, reduce complexity, isolate side effects, simplify types, or plan a refactor, even if they never say the word "refactor.
5