本文へ移動
cccskills
無料GitHub で公開

Expo-design-analysis

A React Native developer-platform whose marketing site reads like a quietly-confident infrastructure brand. The base canvas is pure white with a soft sky-blue gradient atmospheric wash behind the hero; near-black ink (`#171717`) carries body and display alike. The single brand voltage is **pure black** (`#000000`) for primary CTAs — minimal and editorial-feeling, paired with a small blue text-link accent (`#0d74ce`) reserved for inline body links. Type pairs Inter at modest weights (display 600, body 400) with JetBrains Mono on every code surface. The brand's strongest visual signature is the **device-mockup hero** — a centered MacBook + iPhone composite showing real Expo dev surfaces — over the gradient sky wash.

skillmds/skillmd
インストール方法を見る

含まれるファイル（2）

  • SKILL.md21.2 KB
  • README.md204 B

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Overview

Expo's marketing site reads like a quietly-confident React-Native developer platform. The base canvas is pure white ({colors.canvas} — #ffffff) with a soft sky-blue gradient atmospheric wash behind the hero band. Near-black ink {colors.ink} (#171717) carries body and display alike. The single brand voltage is pure black ({colors.primary} — #000000) for primary CTAs — minimal and editorial-feeling. A small blue text-link accent ({colors.text-link} — #0d74ce) is reserved for inline body links, never as a CTA.

Type runs Inter as the single sans family at modest weights (display 600, body 400). JetBrains Mono carries every code surface. No custom typeface — the brand trusts Inter's editorial neutrality.

The brand's strongest visual signature is the device-mockup hero — a centered MacBook + iPhone composite showing real Expo dev surfaces (Expo Studio, EAS Build dashboard, the Expo Go simulator) — over a sky-blue gradient atmospheric wash. The composite is the page's chrome instead of an illustration.

Key Characteristics:

  • Pure white canvas with sky-blue gradient atmospheric backdrop in hero only.
  • Single primary CTA: pure black pill at {rounded.md} (8px) — compact developer-tool dialect.
  • Text-link blue ({colors.text-link}) for inline links only — never on a CTA.
  • Inter as the single sans family — no custom display typeface.
  • JetBrains Mono on every code surface.
  • Device-mockup hero with real Expo product surfaces is the brand chrome.
  • Hairline + soft drop depth; no atmospheric brand decoration outside the hero.
  • 96px section rhythm.

Colors

Brand & Accent

  • Black ({colors.primary} — #000000): Primary CTA fill. Used scarcely.
  • Black Active ({colors.primary-active} — #1a1a1a): Press state.
  • Text Link Blue ({colors.text-link} — #0d74ce): Inline body links inside long-form copy. Scoped narrowly — never on CTAs.
  • Legal Link Blue ({colors.text-link-secondary} — #476cff): Inline links inside legal copy footer.
  • Bright Cyan ({colors.accent-link-bright} — #47c2ff): Used very sparingly inside docs widget links.

Surface

  • Canvas ({colors.canvas} — #ffffff): Pure white page floor.
  • Canvas Soft ({colors.canvas-soft} — #fafafa): Subtle alternating band.
  • Surface Card ({colors.surface-card} — #ffffff): Pure white card.
  • Surface Strong ({colors.surface-strong} — #f0f0f3): Badges, ecosystem tiles, secondary buttons.
  • Surface Dark ({colors.surface-dark} — #171717): Dark feature cards, code blocks, IDE mockups, featured pricing.
  • Surface Dark Elevated ({colors.surface-dark-elevated} — #1a1a1a): One step lighter inside dark cards.

Atmospheric Backdrop

  • Sky Light ({colors.gradient-sky-light} — #cfe7ff) + Sky Mid ({colors.gradient-sky-mid} — #a8c8e8): The soft sky-blue gradient wash behind the homepage hero only. Not a brand action color.

Hairlines

  • Hairline ({colors.hairline} — #f0f0f3): Default 1px divider.
  • Hairline Soft ({colors.hairline-soft} — #f5f5f7): Lighter divider.
  • Hairline Strong ({colors.hairline-strong} — #dcdee0): Stronger panel outline.

Text

  • Ink ({colors.ink} — #171717): Display, body emphasis.
  • Body ({colors.body} — #60646c): Default running-text — slightly cool gray.
  • Body Strong ({colors.body-strong} — #171717): Same as ink.
  • Muted ({colors.muted} — #999999): Sub-titles.
  • Muted Soft ({colors.muted-soft} — #cccccc): Disabled text.
  • On Primary ({colors.on-primary} — #ffffff): White text on black CTA.
  • On Dark ({colors.on-dark} — #ffffff): White text on dark cards.
  • On Dark Soft ({colors.on-dark-soft} — #b0b4ba): Muted off-white on dark.

Semantic

  • Warning ({colors.accent-warning} — #ab6400): Warning text inside docs callouts.
  • Preview ({colors.accent-preview} — #8145b5): "Preview" tag color.
  • Success ({colors.semantic-success} — #16a34a): Confirmation.
  • Error ({colors.semantic-error} — #eb8e90): Validation errors.

Typography

Font Family

Inter is the single sans family across every text role. JetBrains Mono carries every code surface. Fallback: -apple-system, system-ui, sans-serif.

Hierarchy

TokenSizeWeightLine HeightLetter SpacingUse
{typography.display-mega}64px6001.05-1.92pxHomepage hero h1
{typography.display-xl}48px6001.1-1.44pxSubsidiary heroes
{typography.display-lg}36px6001.15-1.08pxSection heads
{typography.display-md}28px6001.2-0.84pxSub-section heads
{typography.display-sm}22px6001.25-0.5pxCard group titles
{typography.title-md}18px6001.40Component titles
{typography.title-sm}16px6001.40List labels
{typography.body-md}16px4001.50Default body
{typography.body-sm}14px4001.50Footer body
{typography.caption}13px4001.40Photo captions
{typography.caption-uppercase}11px6001.40.88pxSection labels, badges
{typography.code}13px4001.50Code blocks — JetBrains Mono
{typography.button}14px5001.00CTA labels
{typography.nav-link}14px5001.40Top-nav menu

Principles

  • Display weight stays at 600 — confident but not bombastic. Inter at 600 reads cleaner than 700.
  • Negative letter-spacing on display — -0.5px to -1.92px tracking.
  • JetBrains Mono on every code surface.

Note on Font Substitutes

Inter and JetBrains Mono are both freely available — the system uses them directly.

Layout

Spacing System

  • Base unit: 4px.
  • Tokens: {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.base} 16px · {spacing.md} 20px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.xxl} 48px · {spacing.section} 96px.
  • Section padding: 96px.

Grid & Container

  • Max content width: ~1200px.
  • Editorial body: 12-column grid.
  • Feature card grids: 2-up at desktop for hero splits, 3-up for benefit grids.
  • Ecosystem tile grid: 8-up at desktop.
  • Footer: 5-column at desktop.

Whitespace Philosophy

Generous editorial pacing. The white canvas does not compete with the hero's gradient sky wash; cards inside dense workflow sections sit close (16-24px gap).

Elevation & Depth

LevelTreatmentUse
Flat (canvas){colors.canvas} (#ffffff)Body bands, footer
Card{colors.surface-card} (#ffffff)Content cards
Hairline border1px {colors.hairline}Card outlines
Soft drop0 4px 12px rgba(0, 0, 0, 0.04)Hovered cards (single shadow tier)
Atmospheric gradientSky-blue radial washHero backdrop only
Dark inversion{colors.surface-dark} (#171717)Dark feature cards, code blocks, featured pricing

Decorative Depth

  • Sky-blue gradient backdrop in the hero only — atmospheric depth without claiming to be a brand color.
  • Device mockup composite as page chrome — MacBook + iPhone showing real Expo dev surfaces.

Shapes

Border Radius Scale

TokenValueUse
{rounded.none}0pxReserved
{rounded.xs}4pxInline tags
{rounded.sm}6pxCompact rows
{rounded.md}8pxCTA buttons, form inputs, ecosystem tiles
{rounded.lg}12pxFeature cards, code blocks, pricing tiers
{rounded.xl}16pxDevice mockup cards
{rounded.xxl}24pxLarger atmospheric cards (rare)
{rounded.pill}9999pxBadges only
{rounded.full}9999pxAvatar plates (rare)

Compact developer-ergonomic radii — 8px CTAs, 12px cards. Pill geometry is reserved for badges, never CTAs.

Components

Top Navigation

top-nav — Background {colors.canvas}, text {colors.ink}, height 64px. Layout: Expo wordmark left, primary horizontal menu (Tools / Workflows / EAS / Pricing / Docs / Showcase), Sign In + Get started CTA right.

Buttons

button-primary — Pure black pill. Background {colors.primary}, text {colors.on-primary}, type {typography.button} (14px / 500), padding 10px × 18px, height 40px, rounded {rounded.md} (8px).

button-primary-active — Press state. Background {colors.primary-active}.

button-secondary — White card with 1px hairline-strong border. Background {colors.surface-card}, text {colors.ink}, 1px {colors.hairline-strong} border.

button-tertiary-text — Inline blue text link. Background transparent, text {colors.text-link}.

Hero & Device Mockup

hero-band — Background {colors.canvas} with a soft sky-blue gradient wash behind the centered headline. Display headline in {typography.display-mega} (64px / 600 / -1.92px), subhead in {typography.body-md}, single primary CTA, then below — the device mockup composite.

device-mockup-card — A layered MacBook + iPhone composite showing real Expo dev surfaces. Background {colors.surface-card}, rounded {rounded.xl}. The MacBook holds the EAS dashboard or Expo Studio screenshot; the iPhone overlay shows the running app in Expo Go. This is the page chrome.

Cards

feature-card — Background {colors.surface-card}, text {colors.ink}, type {typography.title-md}, rounded {rounded.lg}, padding 24px, 1px {colors.hairline-strong} border.

feature-card-dark — Dark variant. Background {colors.surface-dark}, text {colors.on-dark}. Same shape, dark inversion.

workflow-step-card — Step in the "Get your app on every device" workflow row. Background {colors.surface-card}, text {colors.body}, rounded {rounded.lg}, padding 20px. Layout: 32px square {component.workflow-step-icon} + step number + label + body.

workflow-step-icon — Square plate. Background {colors.surface-strong}, rounded {rounded.md}, 32px size.

testimonial-card — Quote card. Background {colors.surface-card}, text {colors.body}, rounded {rounded.lg}, padding 24px.

Code & IDE

code-block — Inline code block. Background {colors.surface-dark}, text {colors.on-dark} in {typography.code} (JetBrains Mono 13px), rounded {rounded.lg}, padding 20px. White text on dark.

ide-mockup-card — Stylized IDE mockup. Background {colors.surface-dark}, rounded {rounded.lg}. Multi-pane editor + terminal preview.

Pricing

pricing-tier-card — Standard pricing tier. Background {colors.surface-card}, rounded {rounded.lg}, padding 32px, 1px {colors.hairline-strong} border.

pricing-tier-featured — Featured tier. Background {colors.surface-dark}, text {colors.on-dark}. Same shape, dark inversion.

Ecosystem

ecosystem-tile — Square logo plate for ecosystem partner logos (TypeScript, React, Sentry, etc.). Background {colors.surface-card}, rounded {rounded.md}, 64px size, 1px {colors.hairline} border.

Forms & Tags

text-input — Background {colors.surface-card}, text {colors.ink}, rounded {rounded.md} (8px), padding 12px × 16px, height 44px, 1px {colors.hairline-strong} border. Focus thickens border to 2px ink.

badge-pill — Small uppercase pill. Background {colors.surface-strong}, text {colors.ink}, type {typography.caption-uppercase}, rounded {rounded.pill}, padding 4px × 10px.

CTA / Footer

cta-band — Pre-footer band. Background {colors.canvas}, centered display headline in {typography.display-lg}, single black pill CTA. 96px padding.

footer-light — Closing white footer. Background {colors.canvas}, text {colors.body}. 5-column link list. 64×48px padding.

footer-link — Background transparent, text {colors.body}, type {typography.body-sm}.

Do's and Don'ts

Do

  • Reserve {colors.primary} (black) for primary CTAs.
  • Use {colors.text-link} (blue) for inline body links only — never on CTAs or buttons.
  • Set every CTA at {rounded.md} (8px) — developer dialect.
  • Use Inter at weight 600 for display, 400 for body.
  • Render every code surface in JetBrains Mono.
  • Pair the hero with the device-mockup composite — it's the page chrome.

Don't

  • Don't introduce a saturated brand action color. Black is the only CTA fill.
  • Don't use blue ({colors.text-link}) on a CTA. Inline links only.
  • Don't drop display below weight 600 or above 700.
  • Don't use full pills on CTAs — pills are for badges only.
  • Don't replicate the sky-blue gradient backdrop outside the hero.
  • Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA is what appears on actual page CTAs.

Responsive Behavior

Breakpoints

NameWidthKey Changes
Mobile< 640pxHero h1 64→32px; device mockup → single iPhone screen; feature grid 1-up; nav hamburger.
Tablet640–1024pxHero h1 48px; device mockup compresses; feature grid 2-up.
Desktop1024–1280pxFull hero h1 64px; full MacBook + iPhone composite; feature grid 3-up.
Wide> 1280pxContent caps at 1200px.

Touch Targets

  • Primary CTA at 40px height — at WCAG AA, padded for AAA.
  • Search input 44px — at AAA.

Collapsing Strategy

  • Top nav switches to hamburger below 768px.
  • Device mockup MacBook + iPhone collapses to a single iPhone preview on mobile.
  • Feature grid: 3-up → 2-up → 1-up.
  • Ecosystem tile grid: 8-up → 4-up → 3-up → 2-up.

Iteration Guide

  1. Focus on a single component at a time.
  2. CTAs default to {rounded.md} (8px). Cards use {rounded.lg} (12px).
  3. Variants live as separate entries.
  4. Use {token.refs} everywhere — never inline hex.
  5. Hover state never documented.
  6. Inter 600 for display, Inter 400 for body. JetBrains Mono on code.
  7. Black stays the only CTA color; text-link blue stays inline-only.

Known Gaps

  • Inter and JetBrains Mono are freely available — no licensing concerns.
  • Animation timings (device mockup parallax, hero entrance) out of scope.
  • In-app surfaces (EAS dashboard interactive, Expo Go simulator) only partially captured via marketing mockups.
  • Form validation states beyond focus not visible on captured surfaces.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

academic-pptx

無料

Use this skill whenever the user wants to create or improve a presentation for an academic context — conference papers, seminar talks, thesis defenses, grant briefings, lab meetings, invited lectures, or any presentation where the audience will evaluate reasoning and evidence. Triggers include: 'conference talk', 'seminar slides', 'thesis defense', 'research presentation', 'academic deck', 'academic presentation'. Also triggers when the user asks to 'make slides' in combination with academic content (e.g., 'make slides for my paper on X', 'create a presentation for my dissertation defense', 'build a deck for my grant proposal'). This skill governs CONTENT and STRUCTURE decisions. For the technical work of creating or editing the .pptx file itself, also read the pptx SKILL.md.

日本語の概要は準備中です。原文の説明を表示しています。

skillmds/skillmd1202026年10月9日 更新

adp

無料

Redpanda's Agentic Data Plane: governance infrastructure for building, running, and governing AI agents and MCP servers, plus a proxying AI Gateway for LLM providers, operated via `rpk ai` and the ADP API. Use when creating or managing AI agents (managed or self-managed) via `rpk ai agent` or `AgentRegistryService`; configuring MCP servers (remote or managed catalog, code mode, auth); setting up LLM providers or querying models via `rpk ai llm`/`rpk ai model` or the AI Gateway proxy; or configuring budgets, guardrails, or Cedar access-control policies through the governance APIs. Also covers reading agent transcripts and spending insights, and wiring OAuth clients or providers to the aigw Authorization Server. For the separate rpk cloud mcp control-plane MCP server, see `/redpanda:rpk-cloud`.

日本語の概要は準備中です。原文の説明を表示しています。

skillmds/skillmd1202026年10月9日 更新

ads

無料

Operate professional paid advertising across Google, Meta, YouTube, LinkedIn, TikTok, Microsoft, Apple, Amazon, Reddit, Pinterest, Snapchat, and X. Use for account intake, source-grounded audits, strategy, budget and measurement planning, creative production, experiments, reporting, monitoring, and explicitly approved campaign changes. Also trigger on PPC, paid social, retail media, attribution, tracking, landing pages, cross-platform conversion totals, negative keywords or search terms, beta-feature scoring, stale platform claims, API-token or credential setup, campaign deletion, and safe Claude Ads installation or uninstall.

日本語の概要は準備中です。原文の説明を表示しています。

skillmds/skillmd1202026年10月9日 更新

ads-apple

無料

Audit Apple Ads measurement, AdServices and AdAttributionKit, campaign and keyword structure, Search Match, App Store placements, custom product pages, bidding, budgets, MMP reconciliation, and policy. Use for Apple Ads, Apple Search Ads, App Store ads, Search Match, custom product pages, AdServices, or Apple app-install campaigns.

日本語の概要は準備中です。原文の説明を表示しています。

skillmds/skillmd1202026年10月9日 更新

ads-competitor

無料

Research competitor paid-ad presence, messaging, creative, formats, landing pages, keyword and auction signals, transparent ad libraries, and strategic gaps across supported platforms. Use for competitor ads, ad libraries, ad spy, competitive PPC analysis, competitor creative, Google Ads Transparency, Meta Ad Library, or paid-media competitor research.

日本語の概要は準備中です。原文の説明を表示しています。

skillmds/skillmd1202026年10月9日 更新

ads-dna

無料

Extract a public-safe brand and offer profile for paid advertising from an authorized website and operator input. Triggers on: brand DNA, brand profile, brand identity, brand style, brand colors, brand voice, visual identity, style guide, website brand analysis.

日本語の概要は準備中です。原文の説明を表示しています。

skillmds/skillmd1202026年10月9日 更新

skillmds のスキルをすべて見る

このスキルの問題を報告する