Buscar habilidades.../

Circuit Syntax Portfolio | Skills Pool

Archivo del skill

Circuit Syntax Portfolio

Applies the Google Stitch design system "Circuit & Syntax" and Jude Michael portfolio conventions when styling UI, theme tokens, or Stitch-linked work. Use when editing Flutter presentation, `lib/app/theme`, portfolio layout, or when the user mentions Stitch, Circuit & Syntax, or the Digital Blueprint aesthetic.

michaeljude0 estrellas3 abr 2026

Ocupación
Categorías: Plugins de IDE

Contenido de la habilidad

Circuit & Syntax — Jude Michael Portfolio

Source of truth

Design system name (Stitch): Circuit & Syntax (displayName on the project design-system asset).
Stitch asset: assets/549a4f0a381046a4b7f454dd05efafd0
Stitch project: Jude Michael Portfolio — project id 15785731210514207986 (use without projects/ prefix in MCP args that expect projectId).
Authoritative tokens in Stitch: call MCP list_design_systems with projectId above; screens: list_screens with the same id.

Flutter mapping in this repo

Colors / scheme: lib/app/theme/color_tokens.dart — comments already tie each color to Stitch namedColors; extend or change UI colors here, not ad hoc literals.

Skills relacionados

Instalación rápida

Circuit Syntax Portfolio

npx skills add michaeljude/jude-michael-portfolio

Descargar Skill Abrir repositorio

Autor: michaeljude
estrellas: 0
Actualizado: 3 abr 2026
Ocupación

En esta página

01Circuit & Syntax — Jude Michael Portfolio

Theme wiring: lib/app/theme/app_theme.dart (Material 3 dark, no-line-friendly divider theme, chips, inputs).

Typography: lib/app/theme/text_styles.dart — Space Grotesk (display) + Inter (body) per the system.

Spacing / radii: lib/app/theme/spacing.dart, lib/app/theme/radii.dart — align section gaps with the spec (large vertical rhythm between major sections).

Creative direction (keep short)

North star: “The Digital Blueprint” — premium, technical, editorial; feels like a precise IDE for the web, not a generic template.
Style: Organic Brutalism — strict grids + fluid motion and layered surfaces; intentional asymmetry (e.g. display type not always centered).
Accents: Electric emerald primary (#00E676 seed / #3FFF8B primary in tokens), cyber blue secondary; dark nocturnal base #0E0E0E.

Rules to enforce in UI code

No-line rule: Prefer chromatic shifts between surface and surface-container-low (and related surfaces) instead of heavy dividers; avoid solid 1px borders for sectioning.
Surface stack: surface → surface-container-low (sections) → surface-container (cards) → surface-container-highest (elevated / floating).
Glass: For nav or floating panels, favor surface-variant with ~60% opacity and ~24px backdrop blur when implementing glass surfaces.
CTAs: Primary actions can use gradient from primary to primaryContainer (AppColorTokens.primaryGradient).
Code / snippet blocks: Prefer surfaceContainerLowest; border outlineVariant at ~20% opacity; syntax emphasis colors align with secondary, tertiary, error family — not random palette colors.
Cards: surfaceContainer, generous padding; interactive hover/focus: shift toward surfaceContainerHigh and subtle scale (~1.02).
Chips / tags: Pill shapes; secondary container family for “building block” tech tags.
Shadows: Prefer primary-tinted ambient glow (e.g. low-opacity primary), not flat grey shadows.
Motion: When defining animation curves, prefer spring-like feel (spec suggests damping ~20, stiffness ~90) over linear easing for primary interactions.
Forms / accessibility: If a visible boundary is required, ghost border: outlineVariant at ~15% opacity.

App structure (Flutter routes)

Shell + tabs (lib/app/router/app_router.dart): Home (/), Projects (/projects), Experience (/experience), Skills (/skills), Contact (/contact). Unknown paths redirect to /.

Bloc

When using Bloc, prefer BlocSelector for granular rebuilds on specific state fields (per project rules).

Full markdown spec and token tables

For the complete written design system (all sections) and extended color/token reference, read reference.md.

02Source of truth

03Flutter mapping in this repo

04Creative direction (keep short)

05Rules to enforce in UI code

06App structure (Flutter routes)

08Full markdown spec and token tables

Diseñadores gráficos

Herramientas de Automatización

Coding Agent (bash-first)

Delegate coding tasks to Codex, Claude Code, or Pi agents via background process. Use when: (1) building/creating new features or apps, (2) reviewing PRs (spawn in temp dir), (3) refactoring large codebases, (4) iterative coding that needs file exploration. NOT for: simple one-liner fixes (just edit), reading code (use read tool), thread-bound ACP harness requests in chat (for example spawn/run Codex or Claude Code in a Discord thread; use sessions_spawn with runtime:"acp"), or any work in ~/clawd workspace (never spawn agents here). Claude Code: use --print --permission-mode bypassPermissions (no PTY). Codex/Pi/OpenCode: pty:true required.

Install Vscode Extension

How to install a VS Code extension from an extension ID. Useful when the user wants to add new capabilities to their VS Code environment by installing extensions.

microsoft184.0k

Launch

Launch and automate VS Code (Code OSS) using agent-browser via Chrome DevTools Protocol. Use when you need to interact with the VS Code UI, automate the chat panel, test UI features, or take screenshots of VS Code. Triggers include 'automate VS Code', 'interact with chat', 'test the UI', 'take a screenshot', 'launch Code OSS with debugging'.

microsoft184.0k

Agent Customization

**WORKFLOW SKILL** — Create, update, review, fix, or debug VS Code agent customization files (.instructions.md, .prompt.md, .agent.md, SKILL.md, copilot-instructions.md, AGENTS.md). USE FOR: saving coding preferences; troubleshooting why instructions/skills/agents are ignored or not invoked; configuring applyTo patterns; defining tool restrictions; creating custom agent modes or specialized workflows; packaging domain knowledge; fixing YAML frontmatter syntax. DO NOT USE FOR: general coding questions (use default agent); runtime debugging or error diagnosis; MCP server configuration (use MCP docs directly); VS Code extension development. INVOKES: file system tools (read/write customization files), ask-questions tool (interview user for requirements), subagents for codebase exploration. FOR SINGLE OPERATIONS: For quick YAML frontmatter fixes or creating a single file from a known pattern, edit the file directly — no skill needed.

microsoft184.0k

Herramientas de Automatización

Init

Generate or update chat customization files for AI coding agents

microsoft184.0k

Launch

Launch and automate VS Code Insiders with the Copilot Chat extension using agent-browser via Chrome DevTools Protocol. Use when you need to interact with the VS Code UI, automate the chat panel, test the extension UI, or take screenshots. Triggers include 'automate VS Code', 'interact with chat', 'test the UI', 'take a screenshot', 'launch with debugging'.

microsoft184.0k

Diseñadores gráficos