agents-templated 2.2.21 → 2.2.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/package.json +2 -1
  2. package/templates/agents/commands/README.md +0 -144
  3. package/templates/agents/commands/SCHEMA.md +0 -42
  4. package/templates/agents/commands/arch-check.md +0 -58
  5. package/templates/agents/commands/audit.md +0 -58
  6. package/templates/agents/commands/debug-track.md +0 -58
  7. package/templates/agents/commands/docs.md +0 -58
  8. package/templates/agents/commands/fix.md +0 -58
  9. package/templates/agents/commands/learn-loop.md +0 -58
  10. package/templates/agents/commands/perf.md +0 -58
  11. package/templates/agents/commands/plan.md +0 -58
  12. package/templates/agents/commands/pr.md +0 -58
  13. package/templates/agents/commands/problem-map.md +0 -58
  14. package/templates/agents/commands/release-ready.md +0 -58
  15. package/templates/agents/commands/release.md +0 -58
  16. package/templates/agents/commands/risk-review.md +0 -58
  17. package/templates/agents/commands/scope-shape.md +0 -58
  18. package/templates/agents/commands/task.md +0 -58
  19. package/templates/agents/commands/test-data.md +0 -56
  20. package/templates/agents/commands/test.md +0 -58
  21. package/templates/agents/commands/ux-bar.md +0 -58
  22. package/templates/agents/rules/ai-integration.md +0 -54
  23. package/templates/agents/rules/core.md +0 -173
  24. package/templates/agents/rules/database.md +0 -305
  25. package/templates/agents/rules/frontend.md +0 -217
  26. package/templates/agents/rules/guardrails.md +0 -97
  27. package/templates/agents/rules/hardening.md +0 -52
  28. package/templates/agents/rules/intent-routing.md +0 -54
  29. package/templates/agents/rules/lessons-learned.md +0 -44
  30. package/templates/agents/rules/planning.md +0 -69
  31. package/templates/agents/rules/security.md +0 -278
  32. package/templates/agents/rules/style.md +0 -344
  33. package/templates/agents/rules/system-workflow.md +0 -63
  34. package/templates/agents/rules/testing.md +0 -371
  35. package/templates/agents/rules/workflows.md +0 -56
  36. package/templates/agents/skills/README.md +0 -198
  37. package/templates/agents/skills/api-design/SKILL.md +0 -59
  38. package/templates/agents/skills/app-hardening/SKILL.md +0 -45
  39. package/templates/agents/skills/bug-triage/SKILL.md +0 -36
  40. package/templates/agents/skills/debug-skill/SKILL.md +0 -39
  41. package/templates/agents/skills/emilkowalski-skill/SKILL.md +0 -51
  42. package/templates/agents/skills/error-patterns/SKILL.md +0 -70
  43. package/templates/agents/skills/feature-delivery/SKILL.md +0 -38
  44. package/templates/agents/skills/feature-forge/SKILL.md +0 -39
  45. package/templates/agents/skills/find-skills/SKILL.md +0 -133
  46. package/templates/agents/skills/llm-integration/SKILL.md +0 -64
  47. package/templates/agents/skills/raphaelsalaja-userinterface-wiki/SKILL.md +0 -51
  48. package/templates/agents/skills/secure-code-guardian/SKILL.md +0 -39
  49. package/templates/agents/skills/shadcn-ui/SKILL.md +0 -1932
  50. package/templates/agents/skills/shadcn-ui/references/chart.md +0 -306
  51. package/templates/agents/skills/shadcn-ui/references/learn.md +0 -145
  52. package/templates/agents/skills/shadcn-ui/references/official-ui-reference.md +0 -1729
  53. package/templates/agents/skills/shadcn-ui/references/reference.md +0 -586
  54. package/templates/agents/skills/shadcn-ui/references/ui-reference.md +0 -1578
  55. package/templates/agents/skills/ui-ux-pro-max/SKILL.md +0 -386
@@ -1,173 +0,0 @@
1
- ---
2
- title: "Core Project Guidelines"
3
- description: "Apply to all architecture, type safety, code organization, and enterprise quality standards. Foundation for every feature"
4
- alwaysApply: true
5
- version: "3.0.0"
6
- tags: ["architecture", "core", "enterprise", "technology-agnostic"]
7
- globs:
8
- - "*"
9
- ---
10
-
11
- ## Developer Identity
12
-
13
- - The AI assistant should provide clear, step-by-step solutions
14
- - Focus on security-first thinking in all recommendations
15
- - Provide concise but comprehensive instructions
16
- - Adapt all patterns to the chosen technology stack
17
-
18
- ## Architecture Principles
19
-
20
- ### Security-First Development
21
- - **Validate all inputs** at application boundaries with appropriate validation libraries
22
- - **Authenticate and authorize** every protected endpoint with secure session management
23
- - **Rate limit** public endpoints to prevent abuse and DoS attacks
24
- - **Sanitize outputs** to prevent injection attacks and data leaks
25
- - **Use encryption** for sensitive data in transit and at rest
26
- - **Log security events** appropriately without exposing sensitive information
27
-
28
- ### Performance-Focused
29
- - **Optimize asset delivery** with compression, caching, and lazy loading
30
- - **Monitor performance metrics** specific to your platform (Web Vitals, response times, etc.)
31
- - **Implement appropriate caching strategies** for your data freshness requirements
32
- - **Optimize critical paths** - database queries, API responses, asset loading
33
- - **Profile and benchmark** before and after optimization changes
34
-
35
- ### Type Safety & Validation
36
- - **Use strong typing systems** available in your chosen language
37
- - **Implement runtime validation** for all external/user-provided data
38
- - **Validate at boundaries** - API endpoints, form submissions, configuration
39
- - **Document type contracts** between system components
40
- - **Generate types** from schemas when possible (OpenAPI, GraphQL, database schemas)
41
-
42
- ### Testing Strategy
43
- - **Unit tests** for business logic and utility functions (80% of test effort)
44
- - **Integration tests** for API endpoints and data access layers (15% of test effort)
45
- - **E2E tests** for critical user journeys and workflows (5% of test effort)
46
- - **Accessibility tests** for all user-facing interfaces
47
- - **Performance tests** for critical paths and known bottlenecks
48
- - **Security tests** for authentication, authorization, and validation flows
49
-
50
- ## Code Quality Standards
51
-
52
- ### Architecture & Organization
53
- - **Feature-based structure** - organize code by business domain, not just technical layer
54
- - **Separation of concerns** - keep UI, business logic, and data access separate
55
- - **DRY principle** - don't repeat yourself, extract common patterns
56
- - **SOLID principles** - single responsibility, open/closed, Liskov substitution, interface segregation, dependency inversion
57
- - **Consistent naming** conventions throughout the codebase
58
-
59
- ### Code Style
60
- - **Consistent formatting** with automated tools (prettier, black, gofmt, rustfmt, etc.)
61
- - **Linting rules** enforced via pre-commit hooks or CI/CD
62
- - **Clear comments** for complex logic, architectural decisions, and gotchas
63
- - **Self-documenting code** with meaningful variable and function names
64
- - **No magic numbers** - extract constants with descriptive names
65
-
66
- ### Component/Module Standards (Framework-Specific)
67
- - **Single responsibility** - each component/module should have one clear purpose
68
- - **Reusable units** - build components/modules that can be used in multiple places
69
- - **Proper error handling** for production resilience
70
- - **Accessibility attributes** included for user-facing components
71
- - **Proper documentation** of public APIs and interfaces
72
-
73
- ### Database Standards
74
- - **Choose ONE approach** and maintain consistency (SQL with ORM, NoSQL, managed service, etc.)
75
- - **Schema migrations only** for schema changes (never manual database edits in production)
76
- - **ORM/ODM patterns** to prevent injection attacks (no raw SQL unless performance-critical)
77
- - **Connection pooling** for all production deployments
78
- - **Audit logs** for sensitive data operations
79
- - **Proper indexing** to prevent N+1 query problems
80
-
81
- ## Development Workflow
82
-
83
- ### Quality Gates
84
- - **Automated formatting** checks before code submission
85
- - **Type checking** must pass (strict mode where available)
86
- - **Linting** must pass with zero critical violations
87
- - **Unit tests** must pass with adequate coverage (>80% for business logic)
88
- - **Integration tests** must pass for API and data layer changes
89
- - **Security scans** must pass without high-severity issues
90
- - **Code review** approval required before merging
91
-
92
- ### Environment Management
93
- - **Environment variables** with runtime validation at startup
94
- - **Secrets management** never in code, version control, or logs
95
- - **Database migrations** applied consistently across environments
96
- - **Feature flags** for gradual rollouts and A/B testing
97
- - **Health checks** for deployment validation and monitoring
98
-
99
- ### Performance Standards
100
- - **Monitor resource usage** - memory, CPU, disk, network
101
- - **Track performance metrics** specific to your platform
102
- - **Profile critical paths** regularly to identify bottlenecks
103
- - **Implement caching** appropriately for your use case
104
- - **Alert on regressions** when performance degrades
105
-
106
- ## Technology Stack Selection
107
-
108
- This template is technology-agnostic. Choose your stack based on:
109
- - **Team expertise** and preferred languages/frameworks
110
- - **Project requirements** - performance needs, scalability, real-time features
111
- - **Deployment environment** - cloud platform, container requirements, resources
112
- - **Time constraints** - rapid prototyping vs. long-term maintenance
113
-
114
- ### Frontend Tiers
115
- - **Full-stack frameworks**: Next.js, Nuxt, SvelteKit, Remix
116
- - **Component libraries**: React, Vue, Angular, Svelte, Solid
117
- - **Traditional**: Server-side rendering with templates (Django, Rails, Laravel)
118
- - **Mobile-first**: React Native, Flutter, Kotlin, Swift
119
-
120
- ### Backend Tiers
121
- - **Node.js**: Express, Fastify, NestJS, Koa
122
- - **Python**: Django, FastAPI, Flask
123
- - **Go**: Gin, Echo, Fiber
124
- - **Rust**: Actix-web, Axum, Rocket
125
- - **Java**: Spring Boot, Quarkus, Ktor
126
- - **Other**: Ruby on Rails, C#/.NET, PHP, etc.
127
-
128
- ### Database Tiers
129
- - **SQL**: PostgreSQL, MySQL, SQLite, SQL Server
130
- - **NoSQL**: MongoDB, DynamoDB, CouchDB, Firestore
131
- - **Cloud-native**: Supabase, Firebase, AWS RDS, Azure SQL
132
- - **Search**: Elasticsearch, Meilisearch, Algolia
133
-
134
- ### Authentication
135
- - **Self-managed**: Custom implementation with JWT, sessions, or cookies
136
- - **Framework-integrated**: NextAuth, Passport, Django's auth system
137
- - **SaaS**: Auth0, Firebase Auth, AWS Cognito, Supabase Auth
138
-
139
- ## Maintenance & Evolution
140
-
141
- ### Regular Reviews
142
- - **Dependency updates** - keep packages current with security patches
143
- - **Security audits** - regular vulnerability scanning and code review
144
- - **Performance monitoring** - track metrics and address regressions
145
- - **Code quality** - refactoring and technical debt management
146
- - **Documentation** - keep docs current with code changes
147
-
148
- ### Technology Updates
149
- - **Framework versions** - planned upgrades with migration strategies
150
- - **Critical patches** - immediate application of security updates
151
- - **Feature adoption** - stay current with language/framework improvements
152
- - **Deprecation management** - handle deprecated APIs and patterns
153
-
154
- ## Documentation and Research
155
-
156
- When deciding what to recommend or implement:
157
-
158
- - **Local rules** (this file and other `agents/rules/*.mdc`): Use as the primary source for architecture, security, testing, and style. Follow these when the stack is generic or already covered.
159
- - **Context7 MCP**: Use for **up-to-date library and framework documentation**. When suggesting or implementing patterns for a specific stack (e.g. Next.js, Express, React), query Context7 (`resolve-library-id` then `query-docs`) so recommendations match current APIs and official guidance.
160
- - **NotebookLM MCP**: Use for **research and best-practice discourse** (e.g. OWASP, building-systems advice, template design). Query when adding or changing guidelines, or when the audit/planning needs external best practices. Not for real-time API docs—use Context7 for that.
161
-
162
- ## Communication & Collaboration
163
-
164
- - When providing solutions, be explicit about what to change
165
- - Show code examples in the language/framework being used
166
- - Focus on actionable steps, minimize unnecessary explanation
167
- - Explain security implications of code changes
168
- - Flag performance implications of design decisions
169
-
170
- ---
171
-
172
- Remember: This template adapts to **any modern technology stack** while maintaining **enterprise-grade quality standards**.
173
- Choose your technologies wisely, apply these principles consistently, and keep your codebase maintainable.
@@ -1,305 +0,0 @@
1
- ---
2
- title: "Database and Data Layer Guidelines"
3
- description: "Apply when designing schema, building data access layers, optimizing queries, or managing database operations"
4
- alwaysApply: true
5
- version: "3.0.0"
6
- tags: ["database", "backend", "data", "orm", "schema"]
7
- globs:
8
- - "src/models/**/*"
9
- - "src/data/**/*"
10
- ---
11
-
12
- # Database and Data Layer Guidelines
13
-
14
- Technology-agnostic patterns for secure, maintainable data access.
15
-
16
- ## Core Principles
17
-
18
- ### Design First
19
- - **Schema design** - Think through relationships and constraints
20
- - **Normalization** - Minimize data duplication and anomalies
21
- - **Scalability** - Design for growth and performance
22
- - **Consistency** - ACID transactions when needed (SQL) or eventual consistency patterns (NoSQL)
23
- - **Security** - Access controls at database and application level
24
-
25
- ### Access Patterns
26
- - **ORM/ODM only** - Use abstraction layer, never raw SQL/queries
27
- - **Parameterized queries** - Prevent injection attacks
28
- - **Query optimization** - Avoid N+1 problems and slow queries
29
- - **Connection pooling** - Manage resources efficiently
30
- - **Error handling** - Graceful degradation when database unavailable
31
-
32
- ### Migration Strategy
33
- - **Version control** - All schema changes tracked
34
- - **Idempotent migrations** - Can run multiple times safely
35
- - **Reversible migrations** - Can rollback if needed
36
- - **Testing** - Test migrations in all environments
37
- - **Documentation** - Document significant schema decisions
38
-
39
- ## Database Strategy Options
40
-
41
- ### SQL Databases (PostgreSQL, MySQL, SQLite, SQL Server)
42
-
43
- Characteristics:
44
- - Structured schema with defined tables and relationships
45
- - ACID transactions for data consistency
46
- - Powerful querying with SQL
47
- - Good for relational data
48
- - Mature tooling and libraries
49
-
50
- Tools:
51
- - ORM: Sequelize (Node.js), SQLAlchemy (Python), Hibernate (Java), Entity Framework (.NET)
52
- - Query Builder: Knex.js (Node.js), SqlAlchemy Core (Python), QueryDSL (Java)
53
- - Migration tools: Prisma Migrate, Flyway, Liquibase, Alembic
54
-
55
- Best for:
56
- - Complex relationships between entities
57
- - Strong consistency requirements
58
- - Transactional integrity
59
- - Complex queries
60
- - Team comfortable with SQL
61
-
62
- ### NoSQL Databases (MongoDB, DynamoDB, CouchDB, Firestore)
63
-
64
- Characteristics:
65
- - Flexible/schemaless documents
66
- - Eventual consistency
67
- - Good horizontal scaling
68
- - Fast for simple lookups
69
- - Dev-friendly for rapid iteration
70
-
71
- Tools:
72
- - ODM: Mongoose (MongoDB), AWS SDK (DynamoDB), Firebase SDK (Firestore)
73
- - Schema validation: JSONSchema, Zod, Joi
74
-
75
- Best for:
76
- - Flexible/evolving data structures
77
- - Horizontal scaling
78
- - Fast document lookups
79
- - Real-time updates
80
- - Prototyping and MVPs
81
-
82
- ### Managed Database Services (Supabase, Firebase, AWS RDS)
83
-
84
- Characteristics:
85
- - Hosted by cloud provider
86
- - Automatic backups and scaling
87
- - Built-in authentication
88
- - Real-time subscriptions (some)
89
- - Reduced infrastructure complexity
90
-
91
- Best for:
92
- - Rapid prototyping
93
- - Teams without DevOps expertise
94
- - Projects needing built-in features
95
- - Compliance-heavy requirements
96
- - Teams preferring managed services
97
-
98
- ## Schema Design Patterns
99
-
100
- ### Core Tables/Collections
101
-
102
- Base entities:
103
- - **Users**: Authentication and identity data
104
- - **Roles**: Permission groups
105
- - **Audit logs**: Track changes for compliance
106
-
107
- Related data:
108
- - Define relationships clearly
109
- - Use appropriate constraints (foreign keys, unique constraints)
110
- - Add indexes for common queries
111
- - Document connection between tables
112
-
113
- ### Timestamps
114
-
115
- Include timestamps:
116
- - **Created at**: When record created (immutable)
117
- - **Updated at**: When record last modified
118
- - **Deleted at**: For soft deletes (when applicable)
119
-
120
- ### IDs and Keys
121
-
122
- ID strategy:
123
- - **Primary key**: Uniquely identifies record
124
- - **Foreign key**: References another table (relational)
125
- - **Unique constraints**: Prevent duplicates
126
- - **Non-sequential IDs**: Use UUID or similar for security
127
-
128
- ### Data Validation
129
-
130
- At database level:
131
- - Required fields (NOT NULL)
132
- - Data type constraints
133
- - Length constraints (for strings)
134
- - Enum constraints (for limited values)
135
- - Range constraints (for numbers)
136
-
137
- At application level:
138
- - Validate before insert/update
139
- - Validate format (email, URL, etc.)
140
- - Validate business rules
141
- - Return clear error messages
142
-
143
- ## Query Patterns
144
-
145
- ### Efficient Queries
146
-
147
- Do:
148
- - Use WHERE clauses to filter
149
- - Use indexes on filtered fields
150
- - Use SELECT specific columns
151
- - Use LIMIT for pagination
152
- - Use JOIN for related data
153
- - Use aggregation functions
154
- - Batch operations when possible
155
-
156
- Don't:
157
- - SELECT * (select all columns)
158
- - N+1 queries (query in loop)
159
- - Unindexed large scans
160
- - Complex JOINs without indexes
161
- - Missing WHERE clause
162
- - Fetching unused data
163
-
164
- ### Pagination
165
-
166
- Pagination pattern:
167
- 1. Accept limit and offset parameters
168
- 2. Validate reasonable limit (max 100-1000)
169
- 3. Query with LIMIT and OFFSET
170
- 4. Return total count optionally
171
- 5. Include nextPage/previousPage links
172
-
173
- ### Relationships
174
-
175
- Query related data:
176
- - One-to-many: JOIN or separate queries
177
- - Many-to-many: Junction table with JOINs
178
- - One-to-one: JOIN or embed in document
179
- - Hierarchical: Recursive queries or denormalization
180
-
181
- ## Security
182
-
183
- ### Access Control
184
-
185
- Implement at database:
186
- - Row-level security (RLS in PostgreSQL, Firestore)
187
- - Column-level access restrictions
188
- - Database-level user permissions
189
-
190
- Implement at application:
191
- - Verify user owns resource before returning
192
- - Check permissions before allowing modifications
193
- - Log access to sensitive data
194
- - Rate limit database operations
195
-
196
- ### Sensitive Data
197
-
198
- Protect sensitive data:
199
- - Hash passwords (never store plaintext)
200
- - Encrypt PII at rest
201
- - Never log sensitive data
202
- - Mask sensitive data in backups
203
- - Use parameterized queries to prevent injection
204
-
205
- ### Backup & Recovery
206
-
207
- Backup strategy:
208
- - Automated daily backups
209
- - Test recovery procedures
210
- - Retain backups for compliance period
211
- - Encrypt backups at rest
212
- - Store backups separately from primary database
213
-
214
- ## Performance
215
-
216
- ### Indexing
217
-
218
- Index columns that are:
219
- - Frequently filtered (WHERE clause)
220
- - Used in JOINs
221
- - Used in ORDER BY
222
- - Used in DISTINCT
223
-
224
- Don't over-index:
225
- - Too many indexes slow down writes
226
- - Indexes require storage space
227
- - Maintain only used indexes
228
-
229
- ### Connection Management
230
-
231
- Connection pooling:
232
- - Reuse connections across requests
233
- - Configure reasonable pool size (10-20 connections)
234
- - Set idle timeout
235
- - Monitor connection usage
236
- - Alert on connection exhaustion
237
-
238
- ### Query Optimization
239
-
240
- Optimize slow queries:
241
- 1. Profile query execution time
242
- 2. Check execution plan
243
- 3. Add missing indexes
244
- 4. Rewrite queries if needed
245
- 5. Consider denormalization if needed
246
- 6. Verify schema design
247
-
248
- ## Monitoring & Maintenance
249
-
250
- ### Health Checks
251
-
252
- Monitor:
253
- - Database connectivity
254
- - Query performance (slow query logs)
255
- - Connection pool status
256
- - Storage space usage
257
- - Backup completion
258
- - Replication lag (if applicable)
259
-
260
- ### Database Maintenance
261
-
262
- Regular tasks:
263
- - Update statistics/analyze
264
- - Vacuum/compact (depending on DB)
265
- - Rebuild indexes if needed
266
- - Clean up old audit logs
267
- - Review and optimize slow queries
268
-
269
- ## Testing
270
-
271
- ### Test Data
272
-
273
- Setup:
274
- - Use separate test database
275
- - Reset data before each test
276
- - Use factories for consistent test data
277
- - Seed with realistic data
278
-
279
- Testing patterns:
280
- - Test CRUD operations
281
- - Test relationships
282
- - Test constraints
283
- - Test error cases
284
- - Test performance
285
-
286
- ### Test Examples
287
-
288
- Test: Create and retrieve user
289
- 1. Create user with valid data
290
- 2. Retrieve by ID
291
- 3. Verify data matches
292
-
293
- Test: Enforce unique constraint
294
- 1. Create user with email
295
- 2. Attempt to create another with same email
296
- 3. Verify error is returned
297
-
298
- Test: Cascade delete
299
- 1. Create parent and child records
300
- 2. Delete parent
301
- 3. Verify child is deleted
302
-
303
- ---
304
-
305
- Remember: Good database design prevents bugs, improves performance, and makes your application maintainable.
@@ -1,217 +0,0 @@
1
- ---
2
- title: "Frontend Development Guidelines"
3
- description: "Apply when building UI components, designing pages, creating forms, or implementing accessibility and responsive interfaces"
4
- alwaysApply: true
5
- version: "3.0.0"
6
- tags: ["frontend", "ui", "ux", "security", "accessibility"]
7
- globs:
8
- - "src/**/*"
9
- - "components/**/*"
10
- - "public/**/*"
11
- ---
12
-
13
- # Frontend Development Guidelines
14
-
15
- Technology-agnostic patterns for building secure, accessible user interfaces.
16
-
17
- ## Core Principles
18
-
19
- ### User Experience
20
- - **Responsive design** - Works on mobile, tablet, and desktop
21
- - **Progressive enhancement** - Content works without JavaScript when possible
22
- - **Fast performance** - Minimize blocking resources, lazy load non-critical content
23
- - **Accessibility** - WCAG 2.1 AA compliance for all users
24
- - **Error handling** - Clear, helpful error messages and graceful degradation
25
-
26
- ### Security
27
- - **Input validation** - Validate all user input on client and server
28
- - **Output encoding** - Escape data based on context (HTML, URL, CSS, JavaScript)
29
- - **No sensitive data** - Never include passwords, tokens, or secrets in client code
30
- - **Content Security Policy** - Restrict which resources can load
31
- - **HTTPS only** - Enforce in production environments
32
-
33
- ### Accessibility
34
- - **Semantic HTML** - Use appropriate elements for structure and meaning
35
- - **ARIA attributes** - Include when semantic HTML is insufficient
36
- - **Keyboard navigation** - Full functionality with keyboard only
37
- - **Color contrast** - WCAG AA standard contrast ratios
38
- - **Focus indicators** - Clear visual indicator of focused element
39
- - **Alt text** - Descriptive alt text for all meaningful images
40
- - **Form labels** - Associated labels for all form inputs
41
-
42
- ## Component Development
43
-
44
- ### Component Structure Pattern
45
-
46
- Component responsibilities:
47
- 1. Clear purpose - One thing the component does
48
- 2. Props interface - Document all inputs clearly
49
- 3. Error handling - Handle invalid inputs gracefully
50
- 4. Accessibility - Include ARIA and semantic attributes
51
- 5. Testing - Can be tested in isolation
52
-
53
- ### Component Patterns (Language-Agnostic)
54
-
55
- Component Naming:
56
- - File names: kebab-case (user-profile, navigation-bar)
57
- - Component names: PascalCase (UserProfile, NavigationBar)
58
-
59
- Component Organization:
60
- - Props at top
61
- - State management
62
- - Effects/lifecycle
63
- - Event handlers
64
- - Render/JSX at bottom
65
-
66
- ### Form Development
67
-
68
- Form Validation Pattern:
69
- 1. Define validation schema (JavaScript, Zod, Yup, etc.)
70
- 2. Validate on change for feedback
71
- 3. Validate on blur for efficiency
72
- 4. Show field-specific errors
73
- 5. Disable submit until valid
74
- 6. Validate on server before processing
75
-
76
- Form Accessibility:
77
- - Label associated with each input
78
- - Error messages linked to field
79
- - Required fields marked clearly
80
- - Tab order logical and visible
81
- - Focus management in forms
82
- - Error summary at top (optional)
83
-
84
- ### Responsive Design Patterns
85
-
86
- Breakpoint-based design:
87
- - Mobile first approach
88
- - Add complexity at larger sizes
89
- - Use media queries or responsive framework
90
- - Test on actual devices
91
- - Common breakpoints:
92
- - Mobile: 0-480px
93
- - Tablet: 481-768px
94
- - Desktop: 769-1024px
95
- - Wide: 1025px+
96
-
97
- ### State Management
98
-
99
- Choose ONE approach for consistency:
100
- - **Client-side**: Component state (useState, reactive variables)
101
- - **Context/Provider**: Shared state across components
102
- - **Centralized**: Redux, Vuex, Pinia, or similar
103
- - **Server state**: Load from API, cache locally
104
- - **Local storage**: Persistent browser storage
105
-
106
- Keep state:
107
- - As local as possible
108
- - Close to where used
109
- - Immutable when possible
110
- - Easy to reason about
111
-
112
- ## Design System & Styling
113
-
114
- ### CSS Approach Options
115
-
116
- Choose ONE approach:
117
- - **Utility classes** (Tailwind CSS, UnoCSS)
118
- - **Styled components** (styled-components, Emotion)
119
- - **CSS Modules** (scoped styles)
120
- - **BEM Convention** (Block-Element-Modifier)
121
- - **Atomic CSS** (Atomic design principles)
122
-
123
- Styling Principles:
124
- - Consistent spacing using scale (4px, 8px, 12px, etc.)
125
- - Limited color palette
126
- - Consistent font sizing
127
- - Consistent border radius
128
- - Consistent shadows
129
- - Dark/light mode support when needed
130
-
131
- ### Design Tokens
132
-
133
- Define design system tokens:
134
- - Colors: primary, secondary, danger, success, warning
135
- - Typography: font families, sizes, weights, line heights
136
- - Spacing: margin/padding scale (4px, 8px, 16px, 32px, etc.)
137
- - Shadows: subtle, regular, strong
138
- - Border radius: small, medium, large
139
- - Animations: duration, easing
140
-
141
- Use tokens consistently:
142
- - In components
143
- - In styles
144
- - In tests
145
- - In documentation
146
-
147
- ## Performance Optimization
148
-
149
- ### Image Optimization
150
- - Use appropriate formats (WebP, JPEG, PNG)
151
- - Provide multiple sizes (srcset)
152
- - Lazy load below the fold
153
- - Responsive images
154
- - Optimize file size
155
-
156
- ### Code Splitting
157
- - Split by route (page-based code splitting)
158
- - Split by feature (feature-based code splitting)
159
- - Split third-party libraries
160
- - Load libraries on demand
161
-
162
- ### Caching Strategy
163
- - Cache static assets (images, fonts, CSS, JS)
164
- - Cache API responses appropriately
165
- - Use service workers for offline support
166
- - Clear cache on deployment
167
-
168
- ## Accessibility Checklist
169
-
170
- Before releasing any UI:
171
-
172
- - [ ] Semantic HTML is used correctly
173
- - [ ] All images have descriptive alt text
174
- - [ ] Color contrast meets WCAG AA standards
175
- - [ ] Keyboard navigation works completely
176
- - [ ] Focus indicators are visible
177
- - [ ] Form inputs have associated labels
178
- - [ ] Error messages are clear and specific
179
- - [ ] Headings have correct hierarchy
180
- - [ ] ARIA attributes used when appropriate
181
- - [ ] Mobile layout is responsive
182
- - [ ] Text is readable at smaller sizes
183
- - [ ] Content structure makes sense without CSS
184
- - [ ] No information conveyed by color alone
185
-
186
- ## Browser Compatibility
187
-
188
- Support strategy:
189
- - Define minimum versions to support
190
- - Use feature detection or progressive enhancement
191
- - Test critical paths in target browsers
192
- - Provide fallbacks for older browsers
193
- - Use polyfills when appropriate
194
-
195
- ## Testing Frontend Components
196
-
197
- Unit tests:
198
- - Component renders with props
199
- - Event handlers work correctly
200
- - Error states display properly
201
- - Accessibility attributes present
202
-
203
- Integration tests:
204
- - Form submission workflow
205
- - Navigation between views
206
- - State updates across components
207
- - API integration
208
-
209
- E2E tests:
210
- - Critical user workflows
211
- - Happy path scenarios
212
- - Common error scenarios
213
- - Accessibility workflows
214
-
215
- ---
216
-
217
- Remember: Build user interfaces that work for everyone, load quickly, and provide excellent user experience.