A comprehensive development workflow for building full-stack applications with Vue 3, TypeScript, Node.js/Express, and strict testing/accessibility requirements. Enforces semantic CSS variables, atomic design patterns, and comprehensive testing coverage.
A comprehensive development skill for building production-ready full-stack applications with strict quality standards, accessibility compliance, and comprehensive testing requirements.
This skill guides you through building full-stack applications following industry best practices:
1. **Verify Development Environment**
- Confirm WSL2 with fish shell is available
- Run `nvm use` to ensure correct Node.js version
- Verify latest Cursor/VS Code editor is installed
2. **TypeScript Configuration**
- Enable strict mode in tsconfig.json
- Enable verbatimModuleSyntax, isolatedModules, and esModuleInterop
- Always use type-only imports: `import type { IMyInterface } from './file'`
- Use explicit return types for all functions and methods
- Prefix interfaces with 'I' (e.g., `IUser`)
- Suffix enums with 'Enum' (e.g., `StatusEnum`)
3. **Component Development (Atomic Design)**
- **Search before creating**: Always search codebase for existing components first
- Organize components by atomic design levels: atoms → molecules → organisms → templates → pages
- Place components in `front/src/components/` following atomic structure
- Use PascalCase for component names
- Document ALL components with HTML comments at the top of .vue files (NOT separate .md files)
- Include: component name, description, features, usage examples, props table, accessibility notes
4. **Styling System (Semantic Variables)**
- **MANDATORY**: Use semantic CSS variables from `front/src/assets/vars.css`
- **NEVER** use hard-coded values or px units
- **Base unit**: rem only
- **Spacing variables** (ONLY use these exact five):
- `--spacing-xs` (0.25rem)
- `--spacing-sm` (0.5rem)
- `--spacing-md` (1rem)
- `--spacing-lg` (1.5rem)
- `--spacing-xl` (2rem)
- **Color system**:
- Use semantic variables: `--color-background`, `--color-text`, `--color-border`, etc.
- Never use base design tokens directly (e.g., `--color-primary-500`)
- **CSS naming**: BEM syntax with kebab-case (e.g., `my-block__my-element--my-modifier`)
- **NEVER** use inline styles or Tailwind classes
5. **File Organization & Imports**
- Use absolute imports with `@/` prefix for project files
- Use relative imports for same-directory files
- **When moving files**:
1. Identify all files importing the moved file
2. Update import paths before/immediately after moving
3. Verify all imports use correct paths
4. Run application to check for errors
6. **Accessibility (WCAG 2.1 AA)**
- **STRICT RULE**: ARIA attributes are FORBIDDEN unless ALL conditions met:
1. Semantic HTML cannot provide needed accessibility
2. ARIA serves specific necessary purpose
3. Follows WAI-ARIA best practices
4. Proven necessary through screen reader testing
- **Use semantic HTML first**: `<button>`, `<a>`, `<h1>-<h6>`, `<nav>`, `<main>`, etc.
- Provide meaningful labels and descriptions
- Ensure keyboard navigation works
- Use alt text for images
- Test with screen readers
7. **Frontend Testing (Vitest + Cypress)**
- **Unit tests**: Co-locate in `__tests__/` directory next to components
- **Test file naming**: `*.test.ts` or `*.test.tsx`
- **E2E tests**: Place in `cypress/e2e/`
- **REQUIREMENTS**:
- Every component MUST have unit tests
- Test all props, events, slots
- Verify accessibility features
- Test error states and edge cases
- Test responsive behavior
- 100% coverage for critical components
- **Test structure**:
- Create `*.test-utils.ts` for test utilities
- Create `__fixtures__/` for mock data
- Organize tests by category (rendering, props, events, etc.)
- **Pinia store mocking**:
```typescript
vi.mock('@/stores/myStore', () => ({
useMyStore: vi.fn(() => ({
state: {},
getters: {},
actions: vi.fn(),
})),
}));
```
8. **Backend Architecture**
- Use domain-driven design and Clean Architecture patterns
- Follow SOLID principles
- Organize by feature/domain in `back/src/`
- Layered structure: controllers → services → repositories
- Implement dependency injection
9. **API Development**
- **GraphQL**: Use for flexible data querying
- Implement DataLoader for N+1 prevention
- Use field-level permissions
- Implement custom error types
- **REST**: Follow RESTful principles for non-GraphQL endpoints
- Use proper HTTP methods and status codes
- Implement HATEOAS where applicable
- **Authentication**: JWT with refresh token rotation
- **Rate limiting**: Sliding window per-route limits
- **WebSockets**: For real-time features with heartbeat mechanism
10. **Database Layer**
- **MongoDB**: Primary database for social content
- Use proper indexing strategies
- Implement schema-level validation
- **PostgreSQL**: Relational data (users, relationships)
- Use transactions for integrity
- Implement proper constraints
- **Redis**: Caching and session management
- Implement TTL strategies
- **Migrations**: Maintain version-controlled migrations with rollback strategies
11. **Backend Testing (Jest)**
- **Unit tests**: Co-locate in `__tests__/` directory
- **Integration tests**: Place in `tests/integration/`
- **E2E tests**: Place in `tests/e2e/`
- **REQUIREMENTS**:
- Every service and controller MUST have unit tests
- All API endpoints must have integration tests
- Database operations must have integration tests
- Authentication flows must have E2E tests
- 100% coverage for critical paths
- **Best practices**:
- Use test isolation
- Mock external services
- Use test databases for integration tests
- Clean up test data after each test
12. **Documentation**
- **Frontend**: HTML comments at top of .vue files
- **Backend**:
- Swagger/OpenAPI with detailed schemas
- JSDoc for all public methods
- README files for each module
13. **Code Quality**
- Run `npm run lint` for ESLint checks
- Run `npm run format:biome` for Biome formatting
- Follow rules in `biome.json`
- Use Husky pre-commit hooks
- Monitor with SonarQube
14. **Performance Optimization**
- Lazy load components when possible
- Optimize images and assets
- Use proper caching strategies
- Monitor bundle size
- Implement CDN for media delivery
```
front/
src/
components/ # Atomic design components
views/ # Page components
store/ # Pinia stores
services/ # API services
utils/ # Utility functions
types/ # TypeScript types
assets/
vars.css # Semantic CSS variables
back/
src/
controllers/ # Request handlers
services/ # Business logic
repositories/ # Data access
middleware/ # Custom middleware
models/ # Database models
schemas/ # GraphQL schemas
utils/ # Utility functions
types/ # TypeScript types
```
```vue
<!--
A reusable button component following atomic design principles.
```vue
<AppButton variant="primary" size="md" @click="handleClick">
Click me
</AppButton>
```
| Name | Type | Default | Description |
|------|------|---------|-------------|
| variant | 'primary' \| 'secondary' \| 'danger' | 'primary' | Button style variant |
| size | 'sm' \| 'md' \| 'lg' | 'md' | Button size |
| disabled | boolean | false | Disable button |
-->
<template>
<button
class="app-button"
:class="`app-button--${variant} app-button--${size}`"
:disabled="disabled"
>
<slot />
</button>
</template>
<style scoped>
.app-button {
padding: var(--spacing-sm) var(--spacing-md);
background-color: var(--color-background);
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: var(--spacing-xs);
font-size: var(--font-size-md);
}
</style>
```
```typescript
// Button.test.ts
import { describe, it, expect, vi } from 'vitest';
import { mount } from '@vue/test-utils';
import AppButton from '../AppButton.vue';
describe('AppButton', () => {
describe('Rendering', () => {
it('renders with default props', () => {
const wrapper = mount(AppButton);
expect(wrapper.find('.app-button').exists()).toBe(true);
});
});
describe('Props', () => {
it('applies variant class', () => {
const wrapper = mount(AppButton, { props: { variant: 'primary' } });
expect(wrapper.classes()).toContain('app-button--primary');
});
});
describe('Events', () => {
it('emits click event', async () => {
const wrapper = mount(AppButton);
await wrapper.trigger('click');
expect(wrapper.emitted('click')).toBeTruthy();
});
});
describe('Accessibility', () => {
it('is keyboard accessible', () => {
const wrapper = mount(AppButton);
expect(wrapper.element.tagName).toBe('BUTTON');
});
});
});
```
1. **No ARIA attributes** unless absolutely necessary and all conditions met
2. **Only use the five defined spacing variables** - no custom spacing
3. **Never use px units** - rem only
4. **Never use inline styles or Tailwind** - semantic variables only
5. **100% test coverage required** for critical paths
6. **Document components in .vue files** - no separate .md files
7. **Search before creating** - prevent duplicate components
8. **Update imports when moving files** - maintain codebase integrity
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/cursorrules-development-workflow/raw