| name | developer-experience-ui |
| description | Optimize developer experience for frontend development. Use when setting up development tooling, improving build feedback loops, designing component development workflow, or establishing frontend development conventions. |
Developer Experience UI
When to Use
- Setting up frontend development environment
- Improving build and iteration speed
- Establishing code conventions for frontend
- Designing component development and testing workflow
- Reviewing DX friction in the development process
Rules
- Development server must hot-reload in < 2 seconds โ slow feedback kills productivity
- Build errors must be clear and actionable โ no cryptic webpack errors without context
- TypeScript strict mode is required โ catch errors at compile time, not runtime
- Linting runs on save โ immediate feedback, not deferred to CI
- File naming conventions must be consistent โ enforce with tooling, not documentation
- Component files must be colocated with their styles and tests
- Import paths must be clean โ use path aliases, no
../../../ chains
- Development builds must match production behavior โ no dev-only features that mask bugs
Patterns
Project Configuration
{
"compilerOptions": {
"strict": true,
"noUncheckedIndexedAccess": true,
"paths": {
"@components/*": ["src/components/*"],
"@css/*": ["src/css/*"]
}
}
}
File Naming Convention
src/components/
โโโ Card/
โ โโโ index.tsx # Component
โ โโโ Card.module.css # Scoped styles
โ โโโ Card.test.tsx # Test (colocated)
โโโ Layout/
โ โโโ index.tsx
โ โโโ Layout.module.css
Development Scripts
{
"scripts": {
"start": "docusaurus start",
"build": "docusaurus build",
"serve": "docusaurus serve",
"typecheck": "tsc --noEmit",
"lint": "eslint src/ --ext .ts,.tsx",
"check": "npm run typecheck && npm run lint && npm run build"
}
}
Clean Imports
import { Card } from '@components/Card';
import styles from '@css/custom.css';
import { Card } from '../../../components/Card';
import styles from '../../../css/custom.css';
Pre-commit Validation
npm run typecheck
npm run lint --quiet
Error Message Quality
function loadConfig(path: string): Config {
const raw = readFileSync(path, 'utf-8');
try {
return JSON.parse(raw);
} catch {
throw new Error(
`Failed to parse config at ${path}. ` +
`Check for syntax errors in the JSON file.`
);
}
}
Anti-Patterns
- Slow hot reload: Development server taking 5+ seconds to reflect changes
- Loose TypeScript:
strict: false or widespread any usage
- Scattered files: Component, styles, and tests in three different directory trees
- Deep relative imports:
../../../../components/Button instead of path aliases
- Deferred linting: Only running lint in CI, not on save
- Dev/prod divergence: Features that work in dev but break in production build
- No type checking: Relying entirely on runtime errors to catch type issues
- Manual formatting: Debating code style instead of enforcing with Prettier
- Silent build warnings: Ignoring deprecation and type warnings until they become errors
Checklist