メニュー
Use when designing the Maycrest website or TIE Platform — building pages, components, or dashboards, choosing fonts and colors, applying the brand aesthetic, or seeking web design inspiration.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use when an approved Maycrest spec needs turning into a bite-sized TDD implementation plan a contractor could execute cold — before any code is touched on a client build.
Use when the Maycrest deliver pipeline executes an implementation plan of independent tasks in the current session — one fresh subagent per task, two-stage review each.
Use when a Maycrest build hits any bug, test failure, or unexpected behavior on the Expo/Supabase/Vercel stack — before proposing any fix.
Use when review feedback lands on a Maycrest deliverable — before implementing any suggestion, especially an unclear or questionable one — demanding verification over performative agreement.
Use when completing a task or major feature on a Maycrest build, or before merging — dispatch an independent reviewer subagent as the internal QA gate before the client sees the work.
Use when a Maycrest engagement branch is complete and tests pass — gating the handoff: verify the suite first, then choose merge, PR, keep, or discard, and produce a short client handoff package.
| name | maycrest-web-design |
| description | Use when designing the Maycrest website or TIE Platform — building pages, components, or dashboards, choosing fonts and colors, applying the brand aesthetic, or seeking web design inspiration. |
Design system and web design strategy for Maycrest — an Agentic-Enabled Managed Intelligence Provider serving SMBs in Indianapolis. Three service arms: Creative Services, AI Solutions, and Cybersecurity.
Primary: #0A0F1C (Deep Navy — backgrounds)
Secondary: #1A1F35 (Elevated surfaces)
Accent: #00D4AA (Cyber Teal — CTAs, highlights)
Accent Alt: #7B61FF (Electric Purple — AI/innovation)
Warning: #FF6B35 (Alert Orange — security)
Text Primary: #F0F0F5 (Near white)
Text Secondary: #8A8FA3 (Muted)
Surface: #12172B (Cards, panels)
Border: #2A2F45 (Subtle dividers)
Each follows: Hero → Problem → Solution → Features → Case Study → CTA
Maycrest should look NOTHING like:
Maycrest should feel like:
The Maycrest Digital website has a comprehensive DESIGN.md file at the repo root (website/DESIGN.md) that codifies the entire design system in the Google Stitch 9-section format. This file is the single source of truth for AI coding agents when generating UI.
When building or modifying Maycrest web pages:
DESIGN.md for exact token values (colors, typography, spacing, shadows, motion).observation-window → .glass-card → .intel-card → .story-card → .cta-cardKey DESIGN.md specifics not in this skill:
clamp() (not fixed px values).section-hero, .section-feature, .section-proof, .section-cta)The maycrest-create:design-system-architect skill owns DESIGN.md creation and auditing.
DESIGN.md for exact implementation values when building components