# Src Components Skill

> Studio editors, shared UI systems, and authentic browser renderers.

- Skill: `kevin-liu-01/src-components-skill` (Agent Skill, multi-file: 196 files)
- Install (CLI): `npx skillmds@latest add kevin-liu-01/src-components-skill`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kevin-liu-01/src-components-skill/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: kevin-liu-01 (https://skillmd.com/u/kevin-liu-01)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/kevin-liu-01/src-components-skill

---


# glyphfield / src/components

## Purpose

Own interactive Studio editors, shared controls, direct manipulation, authentic
Canvas/WebGL/Lottie rendering, export UI, and documentation presentation.

## Mental model & key files

- `StudioApp.tsx` owns projects, tabs, active tool, and identity selection.
- `StudioToolWorkspace.tsx` is the public tool-to-editor switch.
- `ShaderLabStudio.tsx` is Design Lab despite the historical filename.
- `AnimationStudio.tsx`, `TimelinePanel.tsx`, and audio components own motion.
- `CanvasViewport`, `EditableCanvasLayer`, layer panels, `ColorControl`,
  `StudioSelect`, and range controls are reusable editor primitives.
- `StudioArtboardBar` shares Animation's artboard controls with Design Lab.
  `DesignVersionProvider` owns one saved-design state; split history/file-action
  consumers can sit in different bars without duplicating persistence.
- `SourceCodeDrawer` is the human surface for tool serializers/validators.
  Import its lightweight `SourceCodeButton` leaf when the drawer loads on demand.
- `LiveMaterialCanvas` and adapters own authentic shader rendering.
- `DocsMdx.tsx` owns reusable rich documentation components.

## Patterns to follow / invariants

- Host components own state; shared controls are controlled and semantic.
- Use accessible labels that are unique within the active tool; agents operate them.
- Preview and export must consume the same resolved values.
- View zoom/pan never mutates artifact geometry.
- Canvas manipulation emits document/tool coordinates, not screen coordinates.
- Use shared color, select, range, button, scrollbar, header, and panel systems.
- Long-running exports expose progress and a stable Browser API action.
- Pause hidden/offscreen animation and honor reduced motion where applicable.
- The landing hero renders the real editor in initial HTML; do not put its
  primary UI behind idle/admission timers. Presentation mode skips portable
  source/autosave work, not editing or authentic rendering.

## Common tasks → first action

- Add a control → find the shared control, add a precise accessible label, persist
  through the host state, serialize it, and confirm export consumes it.
- Add a layer type → update render, selection, ordering, duplication/deletion,
  serializer/adapter, saved design, source application, and export together.
- Add a shader behavior → update authentic preview, thumbnail/fallback, shared
  settings, Animation compatibility, catalog metadata, and motion capture.
- Add export → return a typed non-empty artifact, expose it through automation,
  add preview/download UI, and test MIME/filename/state consistency.
- Change docs visuals → use `DocsMedia`, `DocsMediaGrid`, and `DocsFeatureGrid`.

## Gotchas

Design Lab receives internal draft scope `logo-shader` but its automation/public ID
must be `material`. Do not infer render completion from a React state commit. Logo
shadows/outlines must follow alpha rather than rectangular bounds. Avoid independent
preview clocks for gallery cards. Do not run simultaneous GIF/MP4 exports.