sickn33/agentic-awesome-skills/typography-first

Claude Code and agent skill by sickn33/agentic-awesome-skills

Trust tier 3
  • community
Source check pending

Checking that the SKILL.md file is still in the repository.

Web and App implementation guide for Typography First Design. Trigger when user wants text as the absolute main visual element, with minimal UI chroming.

Install

npx vskill@latest install sickn33/agentic-awesome-skills/typography-first

SKILL.md

Typography First Design

"The words are the interface. No distractions, just beautiful text."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

  1. Hyper-Sized Typography: The main headline is so large it becomes an abstract graphic element.
  2. Minimal UI Chroming: Buttons and navigation may be visually text-only, but retain semantic controls, usable targets and visible focus.
  3. Kinetic Typography: Text that moves, scrolls, or reacts to the user's cursor.

Visual DNA

  • Colors: Extreme high contrast. Pure black and white, or a very dark background with a single neon accent color. Midnight Luxury works well.
  • Typography: Display fonts with extreme character. Try Oswald, Anton, or Bebas Neue for impact, or a massive serif.
  • Layout: Often centers the massive text perfectly in the viewport, cutting off at the edges.

Web Implementation

  • Rely on vw and vh units for font sizing so the text perfectly fills the screen.
  • CSS Example:
css
body {
  background-color: #0A0A0A;
  color: #F5F5F0;
  overflow-x: hidden;
  margin: 0;
}
 
.hero-type {
  font-family: 'Anton', sans-serif;
  font-size: 25vw; /* Fills the width of the screen */
  text-transform: uppercase;
  line-height: 0.8;
  white-space: nowrap;
  
  /* Outline effect */
  color: transparent;
  -webkit-text-stroke: 2px #F5F5F0;
  transition: color 0.3s;
}
 
.hero-type:hover {
  color: var(--cta-highlight, #F5F5F0);
  -webkit-text-stroke: 0;
}
 
.nav-text-btn {
  background: none;
  border: none;
  color: #F5F5F0;
  font-size: 2rem;
  font-family: 'Helvetica Neue', sans-serif;
  text-decoration: underline;
  text-underline-offset: 8px;
  cursor: pointer;
}

App Implementation

SwiftUI
swift
struct TypographyFirstView: View {
    var body: some View {
        ZStack {
            Color(hex: "0A0A0A").ignoresSafeArea()
            
            VStack {
                // Massive Typography Bleeding Off Edge
                Text("THE WORDS ARE THE INTERFACE")
                    .font(.custom("Anton", size: 200)) // Absurdly large
                    .foregroundColor(Color(hex: "F5F5F0"))
                    .lineLimit(1)
                    .fixedSize(horizontal: true, vertical: false) // Force no wrapping
                    .minimumScaleFactor(1.0) // Prevent auto-shrinking
                
                // Outlined variant
                Text("NO CHROMING")
                    .font(.custom("Anton", size: 150))
                    .foregroundColor(.clear)
                    .overlay(
                        Text("NO CHROMING")
                            .font(.custom("Anton", size: 150))
                            .foregroundColor(Color(hex: "0A0A0A"))
                            // Hack for text stroke in SwiftUI
                            .shadow(color: Color(hex: "F5F5F0"), radius: 1)
                    )
                    .lineLimit(1)
                    .fixedSize()
            }
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding(.leading, -20) // Intentionally cut off
        }
    }
}
  • Use .fixedSize(horizontal: true, vertical: false) and .lineLimit(1) to force massive fonts to bleed off the edge of the screen rather than wrapping into a paragraph.
  • Native text-stroke is difficult in SwiftUI; overlapping a masked text or using thin shadows is the common workaround.
Flutter
dart
class TypographyFirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF0A0A0A),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // Auto-scaling hero text
            FittedBox(
              fit: BoxFit.cover,
              child: Text(
                'THE WORDS ARE',
                style: TextStyle(fontFamily: 'Anton', color: const Color(0xFFF5F5F0), height: 0.8),
              ),
            ),
            
            // Outlined text
            FittedBox(
              fit: BoxFit.cover,
              child: Stack(
                children: [
                  // Outline
                  Text(
                    'THE INTERFACE',
                    style: TextStyle(
                      fontFamily: 'Anton', height: 0.8,
                      foreground: Paint()..style = PaintingStyle.stroke..strokeWidth = 2..color = const Color(0xFFF5F5F0),
                    ),
                  ),
                  // Solid fill (transparent)
                  const Text('THE INTERFACE', style: TextStyle(fontFamily: 'Anton', height: 0.8, color: Colors.transparent)),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
  • FittedBox with BoxFit.cover is your best friend here. It ensures the text takes up the maximum possible width/height regardless of the device screen size.
  • Flutter makes text outlines easy by using foreground: Paint()..style = PaintingStyle.stroke in the TextStyle.
React Native
jsx
const TypographyFirstScreen = () => {
  const { width } = useWindowDimensions(); // Update on resize/orientation changes.
  return (
    <View style={{ flex: 1, backgroundColor: '#0A0A0A', justifyContent: 'center' }}>
      
      {/* Massive Text */}
      <Text 
        numberOfLines={1} 
        style={{ fontFamily: 'Anton-Regular', fontSize: width * 0.4, color: '#F5F5F0', lineHeight: width * 0.35, marginLeft: -20 }}
      >
        WORDS ARE
      </Text>
      {/* Outlined Text (Not supported natively in standard React Native Text, requires SVG or shadows) */}
      <Text 
        numberOfLines={1} 
        style={{ 
          fontFamily: 'Anton-Regular', fontSize: width * 0.35, color: '#0A0A0A', lineHeight: width * 0.3,
          textShadowColor: '#F5F5F0', textShadowOffset: {width: -1, height: 1}, textShadowRadius: 1
        }}
      >
        INTERFACE
      </Text>
      {/* Typography Button */}
      <TouchableOpacity style={{ marginTop: 40, alignSelf: 'center' }}>
        <Text style={{ color: '#F5F5F0', fontSize: 24, textDecorationLine: 'underline' }}>
          Explore Now
        </Text>
      </TouchableOpacity>
    </View>
  );
};
  • Use useWindowDimensions().width to calculate extreme font sizes dynamically (e.g., fontSize: width * 0.4).
  • Use numberOfLines={1} and negative margins to allow the text to act as a graphic element bleeding off the screen.
Jetpack Compose
kotlin
@Composable
fun TypographyFirstScreen() {
    Column(
        modifier = Modifier.fillMaxSize().background(Color(0xFF0A0A0A)),
        verticalArrangement = Arrangement.Center
    ) {
        // Massive Text
        Text(
            text = "THE WORDS ARE",
            color = Color(0xFFF5F5F0),
            fontSize = 120.sp, // Absurd size
            fontFamily = FontFamily.SansSerif, // Replace with Anton
            lineHeight = 100.sp,
            softWrap = false, // Force bleed off edge
            modifier = Modifier.offset(x = (-20).dp)
        )
        
        // Outlined Text
        Text(
            text = "THE INTERFACE",
            fontSize = 100.sp,
            fontFamily = FontFamily.SansSerif,
            lineHeight = 90.sp,
            softWrap = false,
            style = TextStyle(
                drawStyle = Stroke(
                    miter = 10f,
                    width = 2f,
                    join = StrokeJoin.Round
                )
            ),
            color = Color(0xFFF5F5F0) // The stroke color
        )
    }
}
  • Set softWrap = false on Text to prevent it from wrapping and ruining the massive headline aesthetic.
  • Compose fully supports text outlines natively using style = TextStyle(drawStyle = Stroke(...)).

Do's and Don'ts

  • DO: Mix filled text and outlined text (using -webkit-text-stroke) for visual interest.
  • DON'T: Wrap the text in cards or containers. Let it bleed into the background.

Limitations

  • This is a styling reference and does not replace environment-specific validation, accessibility testing, or expert review.
  • Ensure appropriate contrast ratios and responsive behaviors are verified separately.

Oversized clipped headlines are decorative studies. Keep essential copy complete, wrappable and scalable; provide an uncut accessible text equivalent. Thin shadow halos approximate an outline and are not true glyph strokes.

Security

  • Security scanPassed, 100 of 100Pattern checks on the skill's files.
  • Model reviewPassed

See the full security report

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

Popularity

Repository stars
47,061
Repository forks
6,855
7-day trend score
54

Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/sickn33/agentic-awesome-skills/typography-first/badge)](https://verified-skill.com/skills/sickn33/agentic-awesome-skills/typography-first)

Something wrong with this skill or its page? Tell us.