design-html

Files (1)

• SKILL.md

SKILL.md (first lines)

# Design HTML Skill

This skill produces HTML/React that works like a real app, not a static mockup.

## Rules — Non-negotiable

1. NO hardcoded heights on text containers. Use `min-height` if needed, never fixed height.
2. NO `overflow:hidden` on text. If text overflows, the container grows.
3. ALL text containers use natural flow. Padding + content = height.
4. Responsive breakpoints: 375px (mobile) → 768px (tablet) → 1024px (laptop) → 1440px (desktop)
5. All components MUST render correctly at every breakpoint — verify by resizing.
6. Use CSS Grid or Flexbox for layout. Never use absolute positioning for content layout.
7. All interactive elements have hover, focus, and active states.
8. All images have explicit `width`/`height` or `aspect-ratio` to prevent CLS.

## React Component Pattern (standard)
```tsx
import React from 'react';

interface [Component]Props {
  // All props typed — never use `any`
}

export function [Component]({ ...props }: [Component]Props) {
  // Loading state
  if (isLoading) return <[Component]Skeleton />;

  // Error state
  if (error) return <[Component]Error error={error} onRetry={refetch} />;

  // Empty state
  if (!data?.length) return <[Component]Empty onAction={handleCreate} />;

  // Content
  return (
    <div className="[component] [responsive-classes]">
      {/* Content that reflows naturally */}
    </div>
  );
}

// Skeleton — content-shaped placeholder, not a spinner
function [Component]Skeleton() {
  return (
    <div className="animate-pulse">
      {/* Match the shape of the real content */}
    </div>
  );
}
```

## Typography Scale
Load `design-system/MASTER.md` and use the defined type scale. Never invent font sizes.

## Spacing Scale
Use the defined spacing tokens. Never use arbitrary pixel values.

## Locale-Specific Patterns
- Use logical CSS properties (`margin-inline-start`, not `margin-left`) for RTL readiness if applicable
- Currency, phone, and date formats should match the project's target locale
- Use `Intl.NumberFormat` and `Intl.DateTimeFormat` for locale-aware formatting

## Verification Checklist
Before handing off any HTML/React component:
- [ ] Renders at 375px without horizontal scroll
- [ ] Renders at 1440px without awkward white space
- [ ] All text reflows naturally on resize (no truncation unless explicitly designed)
- [ ] No hardcoded heights on any text container
- [ ] Loading skeleton matches content shape
- [ ] Error state is helpful and actionable
- [ ] Empty state guides user to take action
- [ ] All design-system tokens used (no magic numbers)
- [ ] `[BUILD_CHECK_COMMAND]` → ZERO errors

From The13thNode/VibeCorp_PromptCEO, MIT.

More from The13thNode/VibeCorp_PromptCEO