skills.rest
Javeria-Javaid
Javeria-JavaidCOMMUNITY
Explore all skills by this author →
GitHub

typography-first

Implements typography-first UI designs with oversized text across web and mobile frameworks.

3|Updated Jul 17, 2026
Search Tags:#typography#css#ui design#swiftui#flutter#react native#jetpack compose
One-click install
npx skills add https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore --skill typography-first-javeria-javaid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: typography-first
Source: https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore/tree/main/Users/Javeria/Desktop/Alkhidmat_foundation_lahore/.agents/skills/design-it/typography-first
Command: npx skills add https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore --skill typography-first-javeria-javaid

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designers and developers often struggle to translate a typography-driven aesthetic—where text itself is the main visual element—into working code across different platforms. This Skill provides concrete implementation patterns for hyper-sized, minimal-chrome interfaces. ## Core Features & Use Cases - Web Implementation: CSS patterns using vw/vh units, -webkit-text-stroke outlines, and text-only navigation buttons. - Cross-Platform Mobile Code: Ready-to-adapt examples for SwiftUI, Flutter, React Native, and Jetpack Compose covering text bleeding, outlines, and dynamic sizing. - Use Case: A developer building a landing page where a massive headline fills the viewport can apply the provided CSS and FittedBox/softWrap techniques to make text bleed off screen edges without wrapping. ## Quick Start Apply the typography-first style to build a landing page with a massive outlined headline and text-only navigation.

Frequently Asked Questions about typography-first

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make text fill the screen width in CSS?▼

Use viewport-relative units like font-size: 25vw so the text scales with screen width. Combine with white-space: nowrap and line-height around 0.8 to keep massive headlines on a single line.

How to create outlined text in Flutter?▼

Flutter supports text outlines by setting foreground: Paint()..style = PaintingStyle.stroke with a strokeWidth and color in the TextStyle. Layer a transparent fill Text on top using a Stack for clean results.

Does SwiftUI support text stroke natively?▼

SwiftUI lacks native text-stroke support. The common workaround overlays duplicate Text views with thin shadows or masks to simulate an outline effect on large display fonts.

How do I stop large text from wrapping in Jetpack Compose?▼

Set softWrap = false on the Text composable so oversized headlines bleed off the screen edge instead of wrapping. Compose also supports outlines natively via TextStyle(drawStyle = Stroke(...)).

When should I avoid typography-first design?▼

Avoid this style when content requires dense information, form inputs, or card-based layouts, since it removes UI chroming entirely. Contrast ratios and responsive behavior must also be verified separately for accessibility.

Related Skills

Explore More Design & Creative Skills→
Intension-usIntension-us

design-consultation

Generate a DESIGN.md documenting typography, color, spacing, layout, and motion guidelines.

Official
Advanced
Aradhya0510Aradhya0510
3

apx

Create full-stack Databricks apps with React and FastAPI.

Community
Intermediate
soofi-xyzsoofi-xyz
2

responsive-design-tests

Run Playwright-based tests to verify UI layout across device sizes.

Official
Intermediate
zakad00e2zakad00e2

design-taste-swiss-system

Design Swiss system interfaces with exact grids and typographic hierarchies.

Community
Advanced