「typography」の検索結果

Professional typography rules for UI design, web applications, software interfaces, and all screen-based text. Enforces timeless typographic correctness that LLMs consistently get wrong: proper quote marks, dashes, spacing, hierarchy, and layout. ENFORCEMENT MODE: When generating ANY HTML, CSS, React, JSX, or UI code containing visible text, auto-apply every rule in this skill silently — do not ask, do not explain, just produce correct typography. AUDIT MODE: When reviewing or improving existing interfaces or legacy code, flag violations and provide fixes. Trigger on: any HTML/CSS/React artifact creation, "build a landing page", "create a component", "design a UI", "fix the typography", "make this look professional", "review this layout", web design, presentation design, dashboard creation, document generation, or any task producing visible text for humans. Even if the user doesn't mention typography, apply these rules whenever generating UI output.

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

Design and implement typography systems for web and brand projects. Covers font pairing, type scales, variable fonts, web font loading strategies (font-display, subsetting), CSS typography best practices, and WordPress theme typography integration. Use when selecting fonts, building type scales, loading web fonts, configuring theme.json typography, or fixing font performance issues.

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

Research-grounded typography for any text-bearing surface — web, PDF, email, documents. GENERATIVE: apply correct line length, font sizing, contrast, dark mode, mobile, and Japanese rules from the start when building any UI, page, layout, or document. REVIEW: audit existing CSS/HTML/templates for typography violations. Use this skill whenever you are writing CSS that touches font-size, line-height, max-width, color, or font-family. Use it when building any frontend component, page, or layout — even if the user doesn't mention typography. Use it when reviewing any rendered output for readability. Use it when generating PDFs, emails, or any formatted document. If text will be read by a human, this skill applies.

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

Critique a rendered screen's typography — scale usage, readability, consistency, and token compliance. Use when reviewing type on a screen. For defining the scale itself, use `typography-scale` (ui-design).

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

Assemble the FREE steps of the product-hypermotion + kinetic-typography video format — dice ONE Seedance 2.0 hypermotion clip into 5-6 segments and intercut them with PIL kinetic-typography spec/CTA cards (italic skew, 1.08x outline echo, 3D extrusion, slam-with-shake, inversion flash) plus a real-logo PIL end card (base64-decoded from the brand SVG), center-crop 1:1 to 9:16, and explicit-map mux a music bed. Deterministic, FREE (PIL + FFmpeg), no paid calls, the real logo and spec typography stay pixel-crisp. The paid steps (the ONE Seedance i2v, the music) are separate capabilities; the recipe orchestrates them. Use for the product-hypermotion format.

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

Design or evaluate a brand visual identity system covering logo, color, typography, imagery direction, iconography, and motion principles. Use this skill whenever the user wants to design a logo, build a visual identity, define brand colors, choose brand typography, develop iconography, plan brand imagery, or evaluate an existing identity for cohesion. Triggers on logo design, brand identity, visual identity, brand mark, wordmark, monogram, color palette, brand colors, brand typography, type system, iconography, brand imagery, motion design, brand system, identity system. Also triggers when the user has a brand direction approved and now needs the visual artifacts that express it.

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

Typography pass covering font choice, modular scale, tracking, leading, weight hierarchy, and micro-typography details. Use when fonts feel generic (default Inter with no reason), the scale is ad hoc, hierarchy is flat, or the user says "fix the typography" / "the text doesn't feel right". Invoke when the user asks for typeset on their UI, or mentions 'typeset' alongside design / UI / frontend work.

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

Kinetic typography, logo animations, and stylized motion design skill. **Triggers when:** - User wants text animations or kinetic typography - Request involves logo reveals or title sequences - Content focuses on visual impact over education - User mentions "title", "intro", "logo", "text animation", "kinetic" **Capabilities:** - Kinetic typography with dynamic text effects - Logo reveals and brand animations - Particle effects and visual flourishes - Modern motion design patterns - Attention-grabbing title sequences

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

Build polished, intentional UIs with concrete CSS/Tailwind values — typography, color, layout, spacing, dark mode, accessibility, animations, components. Encodes specific, opinionated rules with exact values, not vague advice. Covers buttons, cards, forms, tables, navigation, dashboards, landing pages, onboarding, and more. Triggers on "absolute ui", "design a UI", "style this component", "make this less like AI slop", "fix the spacing/typography/color", "dark mode", "design a pricing page", "make this look better".

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

Provider-independent title design and kinetic typography direction for video, animation, ads, explainers, social hooks, brand films, lyric/text videos, title cards, main titles, lower thirds, captions-as-design, and other motion-led text. Use when an agent must plan, prompt, implement, hand off, iterate, or QA typography hierarchy, readability, timing, reveal/hold/exit, motion semantics, line breaks, safe areas, localization, brand constraints, accessibility, flashing/motion safety, or production specs for animated text.

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

The craft of creating and maintaining cohesive brand identity systems. Branding translates brand strategy into tangible visual and verbal identity—logos, color systems, typography, imagery, and voice guidelines that work together to make a brand recognizable and memorable. This skill covers logo design, visual identity systems, brand guidelines, naming, verbal identity, and brand application across touchpoints. Great branding is invisible when done right—it feels inevitable, as if the brand couldn't have looked any other way. Use when "logo, branding, brand identity, brand guidelines, visual identity, color palette, typography, brand book, naming, rebrand, brand refresh, brand system, branding, identity, logo, visual-design, guidelines, naming, typography, color" mentioned.

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

Audit existing typography in a codebase — find inconsistencies, hardcoded sizes, and hierarchy gaps. Use when asked to "audit our typography", "find hardcoded font sizes", or "our type is inconsistent".

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

Create text effects impossible with CSS alone — kinetic typography, flowing text around animated obstacles, calligrams, shrinkwrap chat bubbles, typographic ASCII art, glyph path animation, variable font waves, glyph morphing, illuminated manuscripts. Single-file HTML output, zero build step. Powered by @chenglou/pretext + opentype.js. Triggers on text effects, kinetic typography, text animation, calligram, glyph art, typography art.

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

Generate archetype-driven semantic design tokens (colors, typography, spacing, radius, motion, elevation) that don't look vibecoded. Hard-bans Tailwind-default palettes, Inter-only typography, and purple→pink gradients unless the chosen archetype explicitly demands them. Load when the user asks to generate design tokens, create a design system, set up CSS custom properties, build a token scale, design a color system, set up typography scale, or when frontend-design routes here during token generation. Also triggers on "design tokens for", "token system", "CSS variables for design", "set up a theme", "build a design system foundation". Sub-skill of frontend-design. Always reads ARCHETYPE.md first.

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

Czech typography rules for web development. Use when building web pages in Czech language, writing Czech content, or fixing typography issues in Czech text. Covers punctuation, dashes, quotes, numbers, units, non-breaking spaces, and HTML entities.

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

Use when building creative browser demos with @chenglou/pretext — DOM-free text layout for ASCII art, typographic flow around obstacles, text-as-geometry games, kinetic typography, and text-powered generative art. Produces single-file HTML demos by default.

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

When the user wants to apply, document, or enforce brand guidelines for any product or company. Also use when the user mentions 'brand guidelines,' 'brand colors,' 'typography,' 'logo usage,' 'brand voice,' 'visual identity,' 'tone of voice,' 'brand standards,' 'style guide,' 'brand consistency,' or 'company design standards.' Covers color systems, typography, logo rules, imagery guidelines, and tone matrix for any brand — including Anthropic's official identity.

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

Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography.

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

Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering color/theming problems. Covers: @theme inline pattern, CSS variable architecture, dark mode with ThemeProvider, component composition, vite.config setup, common v4 gotchas, and production-tested patterns. Keywords: Tailwind v4, shadcn/ui, @tailwindcss/vite, @theme inline, dark mode, CSS variables, hsl() wrapper, components.json, React theming, theme switching, colors not working, variables broken, theme not applying, @plugin directive, typography plugin, forms plugin, prose class, @tailwindcss/typography, @tailwindcss/forms

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

Create a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use `readable-measure`; for judging type on an existing screen use `critique-typography` (visual-critique).

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

Select, pair, and implement typefaces for web projects. Use when the user mentions "font pairing", "which typeface", "line height", "responsive typography", "web font loading", "type hierarchy", "variable fonts", "FOUT/FOIT", "typographic scale", or "the text is hard to read". Also trigger when choosing between system fonts and web fonts, optimizing font-loading performance, or designing readable long-form content. Covers readability evaluation, CSS implementation, and performance optimization. For overall UI design systems, see refactoring-ui. For dramatic typographic experiences, see top-design.

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

Create award-winning, immersive web experiences at the level of Awwwards-featured agencies. Use when the user mentions "Awwwards quality", "make my site stunning", "scroll animations", "parallax storytelling", "cinematic web design", "portfolio site", or "brand experience". Also trigger when elevating a standard landing page into a memorable digital experience. Covers dramatic typography, purposeful motion, scroll-based composition, and performance-optimized animation. For foundational UI, see refactoring-ui. For type selection, see web-typography.

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

When the user wants to define, audit, or apply visual identity (typography, colors, spacing, design tokens, frontend aesthetics). Also use when the user mentions "brand style guide," "visual identity," "design system," "typography," "color palette," "brand guidelines," "AI brand aesthetics," "brand colors," "font choices," "spacing system," "design tokens," "motion," "distinctive design," "frontend aesthetics," "PowerPoint theme," "Google Slides brand," or "slide master colors." For brand story, positioning, and voice, use branding.

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

Use when generating or editing images with Microsoft MAI Image models on Scenario via MCP: photoreal or stylized text-to-image with legible in-image typography, posters, packaging, magazine covers, ads, key art, or instruction-based editing such as text swaps, recoloring, object removal or replacement, background swaps, lighting changes, and full restyles. Keywords: MAI Image 2.5, 2.5 Pro, 2.5 Edit, 2.5 Pro Edit, Microsoft, txt2img, img2img, typography, text rendering, image edit.

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