frontend-init
Frontend Init (Scaffolded Project)
Quick start
- Confirm baseline assumptions
- Project already scaffolded (no build-tool scaffolding in this skill)
- Package manager is pnpm
- TypeScript is used (or will be added)
- Ask one decision question early
- UI/CSS: "Do you want a UI/component library or CSS framework? If yes, which one?" (If none, proceed with plain CSS Modules or the existing setup.)
- Apply baseline setup
- Tooling: add Vitest + Oxc lint/format and wire
package.jsonscripts - TypeScript: enable strict mode + DOM libs +
@/*path alias - Structure: create progressive FSD-style folders (
src/app,src/shared,src/features)
Links:
- Tooling details: see
frontend-init/references/tooling.md
More from iamkhan21/skills
react-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.
5modern-ui-page
Creates modern full-page UI with strong visual direction while preserving accessibility and UX fundamentals. Use when the user asks for a landing page, marketing page, dashboard page, homepage, redesign, or to make a page feel more polished, modern, or premium.
1