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

design

スター1

フォーク0

更新日2026年6月23日 23:03

Synthex design system enforcer. NEVER use Inter as a heading font, purple (#8B5CF6) gradients on white, or generic glassmorphism without Synthex tokens. ALWAYS use Space Grotesk headings, #f97316 brand orange, #0f172a slate background, and the Synthex glass token set. Activate on ANY request involving UI, components, styling, layout, visual design, colour, typography, spacing, shadows, animations, or anything a user will see on screen.

インストール

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

Manusで実行

ソース

CleanExpo

CleanExpo/Synthex

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

ダウンロード

Manusで実行

ファイルエクスプローラー

2 ファイル

SKILL.md

readonly

このリポジトリの他の Skills

同じリポジトリ

north-star

CleanExpo/Synthex

The engineering navigation layer for Synthex — holds the mission, the current course, the rules of the ship, and routes work to the right existing specialist. Load at the START of any planning, prioritisation, "what's next", roadmap, scope, or new-feature decision. NEVER let work drift off the critical path or add capabilities the ship already carries (see dependency-discipline). NEVER claim done without the verification gate. NEVER merge to production or change prod data without a human gate. ALWAYS trace a task to the NorthStar, the live Linear epic, and an existing system before writing code.

2026-06-241

playwright-cli

CleanExpo/Synthex

Authenticated browser automation for Synthex — drive real Chrome to log in, screenshot, and audit dashboard/integration surfaces. Use for live visual verification, "audit the dashboard", "check what's connected", or closing the verification gate on /dashboard/* routes. Two backends: the Playwright MCP server (interactive, in-session tools) and the committed CLI scripts (scripts/browser/*.mjs, reliable + headless). RUNS WHERE THE BROWSER + NETWORK + AUTH EXIST — i.e. a local machine, not a network-restricted sandbox.

2026-06-241

api-testing

CleanExpo/Synthex

Synthex API testing enforcer. NEVER mock the database in integration tests — use real Supabase. NEVER skip the 401 (unauthenticated) or 403 (wrong org) test cases. NEVER use pnpm. ALWAYS structure tests as: 401 → 403 → 400 → 200/201 happy path. Activate on ANY request to write API tests, validate endpoints, add test coverage, or check test quality.

2026-06-231

database-prisma

CleanExpo/Synthex

Synthex database operations enforcer. NEVER use prisma db push for schema changes — use migrate diff + db execute. NEVER add non-nullable columns without defaults. NEVER write Prisma queries without organizationId scope. ALWAYS use backward-compatible migrations and validate with prisma validate first. Activate on ANY request to change schema, write a query, create a migration, add a model, or modify database operations.

2026-06-231

security-hardener

CleanExpo/Synthex

Synthex security posture enforcer. NEVER apply generic OWASP checklists without grounding in Synthex's specific threat model. NEVER suggest any auth system other than Supabase. ALWAYS audit: SSRF via validateExternalUrl, JWT tier elevation via resolveVerifiedTier, CORS via CORS_ORIGIN exact-match, org-scope bypass in Prisma. Activate on ANY request to harden security, audit vulnerabilities, review auth patterns, check for injection risks, or assess an attack surface.

2026-06-231

brand-campaign-generator

CleanExpo/Synthex

Synthex campaign content enforcer. NEVER open posts with "Excited to announce", use "leverage", "game-changing", or "revolutionary", produce platform-agnostic copy, or generate content that scores below 80. ALWAYS write platform-distinct hooks, use specific numbers over superlatives, and enforce exactly one CTA per piece. Activate on ANY request to create a campaign, generate posts, write social content, or launch content for a product, offer, or event.

2026-06-231

name	design
description	Synthex design system enforcer. NEVER use Inter as a heading font, purple (#8B5CF6) gradients on white, or generic glassmorphism without Synthex tokens. ALWAYS use Space Grotesk headings, #f97316 brand orange, #0f172a slate background, and the Synthex glass token set. Activate on ANY request involving UI, components, styling, layout, visual design, colour, typography, spacing, shadows, animations, or anything a user will see on screen.
metadata	{"author":"synthex","version":"2.0","engine":"synthex-ai-agency","type":"capability-uplift-visual","triggers":["design","ui component","glassmorphism","visual design","responsive layout","visual","colour","color","typography","layout","component","styling","interface","spacing","shadow","animation","responsive"],"requires":["ui-ux"]}
context	fork

Design Agent

Purpose

Maintains SYNTHEX's glassmorphic design system consistency, implements responsive layouts, and ensures brand coherence across all interfaces. Enforces design tokens, typography, colour palette, and animation standards.

When to Use

Activate this skill when:

Creating new UI components with glassmorphic styling
Implementing responsive grid layouts
Reviewing visual consistency across pages
Applying design tokens (colours, spacing, shadows)
Building interactive form elements or modals

When NOT to Use This Skill

When building backend API logic (use api-testing or code-review)
When working on database schema or queries (use database-prisma)
When auditing user flows or accessibility compliance (use ui-ux)
When optimising server-side performance (no design skill needed)
Instead use: ui-ux for UX audits, code-review for non-visual code

Tech Stack

Styling: Tailwind CSS 3.x
UI Pattern: Glassmorphic design system
Theme: Dark/Light mode support
Icons: AI-generated custom icons (NO Lucide)
Animations: CSS transitions, Framer Motion

Instructions

Review design brief — Understand the component's purpose and context
Select design tokens — Apply correct colours, spacing, and typography
Apply glassmorphic base — Use backdrop-filter, rgba backgrounds, subtle borders
Build responsive layout — Mobile-first with Tailwind breakpoints
Add interaction states — Hover, focus, active, disabled with smooth transitions
Validate colour contrast — Ensure 4.5:1 minimum ratio (WCAG 2.1 AA)
Test dark/light modes — Verify both themes render correctly
Add micro-animations — Subtle transitions for hover, loading, and feedback
Check cross-browser — Verify backdrop-filter support and fallbacks
Document component — Note props, variants, and usage examples

Input Specification

Parameter	Type	Required	Description
component	string	yes	Component name or type to design
context	string	no	Where the component appears (dashboard, modal, etc.)
variant	string	no	`card`, `modal`, `form`, `navigation`

Output Specification

Field	Type	Description
component_code	TSX	React component with Tailwind classes
design_tokens	object	Applied tokens (colours, spacing)
variants	array	Available component variants
a11y_score	string	Accessibility compliance status

Error Handling

Error	Action
Contrast ratio below 4.5:1	Adjust colours, report original vs fixed
Accessibility violation	Flag WCAG failure with specific rule
Browser incompatibility	Add CSS fallback for unsupported properties
Missing design token	Use nearest available token, flag for design system update
Animation performance issue	Simplify to transform/opacity only

Design System

Glassmorphic Principles

backdrop-filter: blur(12px);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);

Colour Palette

Primary: Brand orange (#f97316)
Background: Deep slate (#0f172a)
Surface: Glass layers with blur
Text: White/gray spectrum
Accent: Emerald (#10B981) for success, Rose for errors

Typography

Headings: Inter, bold
Body: Inter, regular
Code: JetBrains Mono

Design Tokens

spacing: 4px base (0.25rem increments)
radius: { sm: 4px, md: 8px, lg: 12px, xl: 16px, full: 9999px }
shadow: {
  glass: '0 8px 32px rgba(0, 0, 0, 0.37)',
  elevated: '0 20px 40px rgba(0, 0, 0, 0.4)'
}

Key Directories

components/ui/ — Base UI components
styles/ — Global stylesheets
tailwind.config.cjs — Theme configuration (design tokens)
public/ — Static assets

Integration Points

Works with ui-ux for user experience validation
Coordinates with code-review for component standards
Supports all feature agents with consistent UI patterns

Capability Uplift — Override Defaults

NEVER use Inter as a heading font (it is the #1 LLM typography default), purple (#8B5CF6 / #7C3AED) gradients on white, generic glassmorphism without Synthex tokens, flat white-on-white SaaS layouts, or treat dark mode as an afterthought. The design skill's Typography section currently lists Inter for headings — disregard that line; Space Grotesk is the heading font.

INSTEAD every component uses Space Grotesk for headings (weight 300–600), #f97316 brand orange as the primary accent, #0f172a deep slate as the base background, and the Synthex glass token set:

background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);

REFERENCE .claude/skills/synthex-standards/references/aesthetic-standards.md

Foundation & Gate Wiring (SYN-1050)

Adopted from the senior-skill standard so every artefact this skill produces is checked against the locked foundation before it lands.

Reads at every invocation (never cached — re-read each run):

.claude/memory/ceo-foundation.md — visual brand consistency, the design-token system, brand-specific visual taboos (Phase 3.X), universal taboos.
.claude/memory/verification-gates.md — gate state for any claim referenced.

Output gate: every client-facing artefact this skill produces routes through brand-voice-enforce before the CEO batched-review queue. A REJECT blocks the artefact until the quoted offending string is fixed.

Evidence standard: every quantitative or factual claim carries exactly one tag — [VERIFIED] / [INFERENCE] / [UNCONFIRMED]. Untagged = defect (.claude/rules/fabel-evidence-standard.md). Never state a projected result as fact.

Spec: see spec.md in this skill directory.