component-workflow

name	component-workflow
description	Full lifecycle for uFawkes components — anatomy definition, implementation spec, styling rules, and Jekyll/Liquid integration patterns. For UI and Build agents.
license	MIT
compatibility	opencode

Component Workflow

Lifecycle

UX defines need → UI specifies anatomy + styling → Build implements → Review validates

Anatomy template

Every component specification must include:

Component: .component-name
─────────────────────────────
Purpose: one sentence

HTML structure:
  .component-name              root element
  .component-name__part-a      description
  .component-name__part-b      description
  .component-name--modifier    variant description

Liquid template pattern:
  (show how it would be used in Jekyll — no production code, just structure)

Visual rules: (see visual-design skill for tokens)
  background, border, padding, typography, states

Responsive:
  ≤767px: changes
  ≤640px: changes

Accessibility:
  ARIA roles, alt text rules, focus behavior

Dependencies:
  CSS appended after line N of main.css
  Includes required: filename.html

Jekyll-specific integration patterns

Include-based components

For reusable components, Build agent creates _includes/component-name.html. Reference: {% include component-name.html param="value" %} Always verify the include file exists before referencing.

Front-matter-driven components

Stack pages use front matter arrays rendered by _layouts/stack.html:

{% for feature in page.features %}
  <li>{{ feature }}</li>
{% endfor %}

Liquid template rules for components

• Use {% if page.key %}...{% endif %} for optional sections
• Never use {% unless %} — use {% if page.key == false %}
• Conditional classes: class="component{% if page.coming_soon %} component--soon{% endif %}"

Current component inventory

Component	Status	BEM class	Location
Stack card	Exists	.stack-card (TBD)	index.md inline
Nav dropdown	Exists	(minima override)	_includes/header.html
Quick start block	Exists	(unstyled)	_layouts/stack.html
Dojo callout	Planned	.dojo-callout	index.md + main.css
Guide meta	Planned	.guide-meta	_includes/guide-meta.html
Live badge	Exists	.badge--live (TBD)	inline