AI Skill Report Card
Generated Skill
Quick Start
HTML<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Beautiful Component</title> <style> :root { --primary: hsl(220, 90%, 56%); --surface: hsl(220, 15%, 97%); --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); } .card { background: var(--surface); border-radius: 12px; box-shadow: var(--shadow); padding: 2rem; transition: transform 0.2s ease; } .card:hover { transform: translateY(-2px); } </style> </head> <body> <div class="card"> <h2>Beautiful Design</h2> <p>Clean, semantic, performant.</p> </div> </body> </html>
Workflow
Phase 1: Architecture Planning
- Define component hierarchy and semantic structure
- Establish design token system (colors, spacing, typography)
- Plan responsive breakpoints and layout strategy
- Consider accessibility requirements (ARIA, focus states)
Phase 2: Foundation
- Write semantic HTML structure
- Implement CSS custom properties for design tokens
- Set up base typography and spacing system
- Create utility classes for common patterns
Phase 3: Styling
- Apply progressive enhancement principles
- Implement responsive design with mobile-first approach
- Add micro-interactions and transitions
- Optimize for performance (CSS containment, will-change)
Phase 4: Refinement
- Test across browsers and devices
- Validate accessibility compliance
- Optimize CSS delivery and bundle size
- Document component API and usage patterns
Examples
Example 1: Modern Card Component Input: "Create a product card with image, title, price, and CTA" Output:
HTML<article class="product-card" role="article"> <div class="product-card__media"> <img src="product.jpg" alt="Product name" loading="lazy"> </div> <div class="product-card__content"> <h3 class="product-card__title">Premium Widget</h3> <p class="product-card__price">$99.99</p> <button class="btn btn--primary">Add to Cart</button> </div> </article>
Example 2: Fluid Typography System Input: "Scalable typography that works on all devices" Output:
CSS:root { --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem); --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); --text-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.875rem); --text-xl: clamp(1.875rem, 1.6rem + 1.375vw, 3rem); } .text-responsive { font-size: var(--text-base); line-height: 1.6; }
Best Practices
Semantic Structure
- Use semantic HTML5 elements (
<article>,<section>,<nav>) - Implement proper heading hierarchy (h1-h6)
- Add ARIA labels and roles for complex interactions
CSS Architecture
- Follow BEM methodology for class naming
- Use CSS custom properties for theming and consistency
- Implement CSS containment for performance isolation
- Leverage CSS Grid and Flexbox appropriately
Performance Optimization
- Use
content-visibility: autofor large content areas - Implement CSS containment (
contain: layout style paint) - Optimize critical rendering path with inlined critical CSS
- Use
transformandopacityfor animations (GPU acceleration)
Responsive Design
- Mobile-first approach with progressive enhancement
- Use relative units (rem, em, vh, vw) over fixed pixels
- Implement fluid typography with
clamp() - Test on real devices, not just browser dev tools
Common Pitfalls
Avoid Specificity Wars
- Don't use
!importantexcept for utility classes - Keep selectors shallow (max 3 levels deep)
- Avoid ID selectors in CSS
Performance Killers
- Don't animate properties that trigger layout (width, height, margin)
- Avoid complex CSS selectors with multiple combinators
- Don't load web fonts without
font-display: swap
Accessibility Oversights
- Don't rely solely on color for information
- Avoid removing focus outlines without providing alternatives
- Don't use
divorspanfor interactive elements
Layout Issues
- Don't use fixed heights that break with dynamic content
- Avoid floats for layout (use Grid/Flexbox instead)
- Don't forget to test with zoomed content (up to 200%)