| name | vite-typescript |
| description | Build and maintain Vite + TypeScript frontends with reliable state, API integration, accessibility, and performance-focused UI architecture. Use for React TS app structure, build/debug, and UX delivery. |
Vite TypeScript Skill
Use this skill for frontend work in Vite + React + TypeScript projects.
When to apply
- Adding new React UI features in TypeScript
- Refactoring component/state architecture
- Integrating frontend API calls and error states
- Improving accessibility, responsiveness, and performance
- Debugging Vite build/dev issues
Workflow
- Map user journey first.
- Identify entry interaction, loading states, success states, and failure states.
- Define the exact API contracts used by the UI.
- Type every boundary.
- Create explicit TypeScript types for API payloads.
- Normalize server values before rendering.
- Keep UI state intentional.
- Separate server data, UI state, and derived view models.
- Avoid mixing fetch side effects and rendering logic.
- Build resilient data fetching.
- Handle pending/empty/error/success for each async surface.
- Keep stale data behavior explicit during refetch.
- Preserve UX quality.
- Maintain keyboard interactions and focus visibility.
- Ensure mobile and desktop layouts both work.
- Add visual hierarchy with clear, purposeful sectioning.
- Validate runtime.
- Run build/lint after changes.
- Check for TypeScript narrowing and null-safety regressions.
Patterns to prefer
- Small, typed presentational components
- Composable hooks/utilities for repeated view logic
- Explicit loading/error components for each panel
- Stable keys and memoization only when necessary
Anti-patterns
any at API boundaries- Silent fetch failures with no UI feedback
- One giant component owning unrelated concerns
- Styling and state logic tightly coupled in unreadable blocks
Validation checklist
npm run build passes- New UI flows have loading/empty/error handling
- Keyboard submit and focus behavior still works
- All new API responses are typed and normalized
