ワンクリックでManusで任意のスキルを実行

component-workflow

スター0

フォーク0

更新日2026年6月11日 09:55

Full lifecycle for uFawkes components — anatomy definition, implementation spec, styling rules, and Jekyll/Liquid integration patterns. For UI and Build agents.

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

Manusで実行

ソース

paruff

paruff/uFawkes.dev

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Manusで実行

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

このリポジトリの他の Skills

同じリポジトリ

code-quality

paruff/uFawkes.dev

Code quality standards for uFawkes.dev — Jekyll/Liquid linting rules, CSS validation, HTML structure checks, and review thresholds. Used by Review and Build agents.

2026-06-110

cross-agent-coordination

paruff/uFawkes.dev

Handoff protocol, dependency sequencing, and parallel task rules for the uFawkes agent team. Ensures agents don't conflict, block each other, or duplicate work.

2026-06-110

planning-workflow

paruff/uFawkes.dev

Prioritization framework, sprint sequencing, and success criteria for uFawkes.dev work. Used by Planning agent to sequence issues across PRs and agents.

2026-06-110

accessibility-workflow

paruff/uFawkes.dev

Three-phase accessibility workflow for uFawkes.dev — audit (find issues), remediate (fix specifications), verify (confirm compliance). Covers WCAG AA, Jekyll/HTML patterns, and vanilla CSS focus states.

2026-06-090

content-strategy

paruff/uFawkes.dev

Content strategy for uFawkes.dev — narrative structure, page-level content hierarchy, tone guidelines, CTA copy patterns, and trust signal rules.

2026-06-090

design-system-workflow

paruff/uFawkes.dev

Process for evolving the Fawkes Design System (FDS) — token definition, pattern library maintenance, compliance checking, and documentation. Currently in bootstrap phase.

2026-06-090

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

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