MCPInstall

text-editing

Styled text display and rich text editing in SwiftUI using Text, AttributedString, and TextEditor with formatting controls. Use when implementing rich text editing or styled text display.

Installs
77
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/rshankras/claude-code-apple-skills --skill text-editing
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads text-editing automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Styled Text Editing

Patterns for displaying styled text and building rich text editors in SwiftUI. Covers Text styling, AttributedString, TextEditor with selection-based formatting, and custom formatting definitions.

When This Skill Activates

Use this skill when the user:

  • Wants to display styled or formatted text
  • Needs rich text editing with bold/italic/underline controls
  • Asks about AttributedString or TextEditor
  • Wants text formatting toolbars
  • Asks about Markdown rendering in Text views
  • Needs custom text attributes or formatting constraints
  • Wants selection-based text formatting

Decision Tree

What text feature do you need?
|
+- Display styled read-only text
|  +- Simple styling (one style) -> Text Styling section below
|  +- Mixed styles in one string -> AttributedString section below
|  +- Markdown content -> Markdown section below
|
+- Edit plain text
|  +- TextEditor(text: $stringBinding)
|
+- Edit rich/styled text
|  +- Basic rich editor -> Rich Text Editing section below
|  +- With formatting toolbar -> Formatting Controls section below
|  +- With custom constraints -> Custom Formatting section below

API Availability

APIMinimum VersionNotes
Text with modifiersiOS 13.font(), .bold(), .italic()
TextEditor(text:)iOS 14Plain string binding
.foregroundStyle()iOS 15Preferred over .foregroundColor()
AttributedStringiOS 15Rich text model
.bold(condition)iOS 16Conditional bold/italic
.underline(pattern:)iOS 16Dash, dot patterns
TextEditor(text:selection:)iOS 18AttributedString + selection
AttributedTextSelectioniOS 18Selection-based formatting
text.transformAttributes(in:)iOS 18Modify attributes in selection
AttributedTextFormattingDefinitioniOS 18Custom formatting constraints
@Environment(\.fontResolutionContext)iOS 18Resolve font properties

Top 5 Mistakes

#MistakeFix
1Using .foregroundColor() on new projectsUse .foregroundStyle() — supports gradients and ShapeStyle
2.animation(.spring()) without value: on textDeprecated in iOS 15 — always pass value: parameter
3Expecting full Markdown in TextText only supports inline Markdown: bold, italic, [links]. No lists, tables, code blocks, images
4Creating new AttributedString instances on every body evaluationCache complex AttributedString objects in @State or computed properties outside body
5Using TextEditor(text: $string) for rich textUse TextEditor(text: $attributedString, selection: $selection) with AttributedString binding (iOS 18+)

Text Styling Quick Reference

// Font
Text("Hello").font(.headline)
Text("Custom").font(.system(size: 24, design: .rounded))

// Weight
Text("Bold").fontWeight(.bold)

// Color — prefer foregroundStyle over foregroundColor
Text("Styled").foregroundStyle(.red)
Text("Gradient").foregroundStyle(
    .linearGradient(colors: [.yellow, .blue], startPoint: .top, endPoint: .bottom)
)

// Decorations
Text("Bold").bold()
Text("Conditional").bold(someCondition)
Text("Underline").underline(true, pattern: .dash, color: .blue)
Text("Strike").strikethrough(true, pattern: .dot, color: .red)

// Layout
Text("Centered").multilineTextAlignment(.center)
Text("Spaced").lineSpacing(10)
Text("Truncated").lineLimit(2).truncationMode(.tail)

AttributedString

// Create and style ranges
var text = AttributedString("Red and Blue")
if let redRange = text.range(of: "Red") {
    text[redRange].foregroundColor = .red
    text[redRange].font = .headline
}
if let blueRange = text.range(of: "Blue") {
    text[blueRange].foregroundColor = .blue
    text[blueRange].underlineStyle = .single
}

// Display
Text(text)

Available Attributes

AttributeTypeExample
.fontFont.headline
.foregroundColorColor.red
.backgroundColorColor.yellow
.underlineStyleUnderlineStyle.single
.underlineColorColor.blue
.strikethroughStyleUnderlineStyle.single
.strikethroughColorColor.red
.inlinePresentationIntentInlinePresentationIntent.stronglyEmphasized (bold), .emphasized (italic)

Rich Text Editing (iOS 18+)

struct RichTextEditorView: View {
    @State private var text = AttributedString("Select text to format")
    @State private var selection = AttributedTextSelection()

    @Environment(\.fontResolutionContext) private var fontResolutionContext

    var body: some View {
        VStack {
            TextEditor(text: $text, selection: $selection)
                .frame(height: 200)

            HStack {
                Button(action: toggleBold) {
                    Image(systemName: "bold")
                }
                Button(action: toggleItalic) {
                    Image(systemName: "italic")
                }
                Button(action: toggleUnderline) {
                    Image(systemName: "underline")
                }
            }
        }
    }

    private func toggleBold() {
        text.transformAttributes(in: &selection) {
            let font = $0.font ?? .default
            let resolved = font.resolve(in: fontResolutionContext)
            $0.font = font.bold(!resolved.isBold)
        }
    }

    private func toggleItalic() {
        text.transformAttributes(in: &selection) {
            let font = $0.font ?? .default
            let resolved = font.resolve(in: fontResolutionContext)
            $0.font = font.italic(!resolved.isItalic)
        }
    }

    private func toggleUnderline() {
        text.transformAttributes(in: &selection) {
            if $0.underlineStyle != nil {
                $0.underlineStyle = nil
            } else {
                $0.underlineStyle = .single
            }
        }
    }
}

Reading Selection Attributes

// Get current attributes at the selection/cursor
let attributes = selection.typingAttributes(in: text)
let currentColor = attributes.foregroundColor ?? .primary

Custom Formatting Definition (iOS 18+)

Constrain which formatting options are available in the editor:

struct MyTextFormatting: AttributedTextFormattingDefinition {
    typealias Scope = AttributeScopes.SwiftUIAttributes

    static let fontWeight = ValueConstraint(
        \.font,
        constraint: { font in
            guard let font = font else { return nil }
            let weight = font.resolve().weight
            return font.weight(weight == .bold ? .regular : .bold)
        }
    )
}

// Apply to TextEditor
TextEditor(text: $text, selection: $selection)
    .textFormattingDefinition(MyTextFormatting.self)

Markdown in Text

// Inline markdown support
Text("This is **bold** and *italic* text")
Text("Visit [Apple](https://www.apple.com)")
Text("Code: `inline code`")

Markdown Limitations

Text supports only inline Markdown:

  • ✅ Bold (**text**), italic (*text*), links, inline code
  • ❌ Line breaks, block formatting, lists, tables, code blocks, images, block quotes

Review Checklist

Text Display

  • Using .foregroundStyle() instead of deprecated .foregroundColor()
  • .lineLimit() paired with .help() tooltip or .textSelection(.enabled) for truncated text
  • Dynamic Type supported — using system font styles, not hardcoded sizes
  • Colors adapt to dark mode — using system colors or semantic styles

AttributedString

  • Complex AttributedString cached in @State, not recreated in body
  • Range lookups use safe if let range = text.range(of:) pattern
  • Appropriate attributes used (.inlinePresentationIntent for semantic bold/italic)

TextEditor

  • Rich text uses TextEditor(text: $attributedString, selection: $selection) (iOS 18+)
  • Formatting toolbar uses text.transformAttributes(in: &selection) pattern
  • Font resolution uses @Environment(\.fontResolutionContext) for toggle logic
  • Accessibility labels provided for formatting buttons

Localization

  • User-facing strings use LocalizedStringKey
  • Markdown in localized strings uses Text(LocalizedStringKey("**Bold** text"))

References

FAQ

What does the text-editing skill do?

Styled text display and rich text editing in SwiftUI using Text, AttributedString, and TextEditor with formatting controls. Use when implementing rich text editing or styled text display.

How do I install text-editing?

Run npx skills add https://github.com/rshankras/claude-code-apple-skills --skill text-editing in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/text-editing/ (personal) or .claude/skills/text-editing/ (project).

Which AI agents can use text-editing?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is text-editing safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains text-editing?

It is published by rshankras in rshankras/claude-code-apple-skills. It has 77 recorded installs.

More from rshankras/claude-code-apple-skills

View all →

macos-development

rshankras/claude-code-apple-skills

Comprehensive macOS development guidance including Swift 6+, SwiftUI, SwiftData, architecture patterns, AppKit bridging, and macOS 26 Tahoe APIs. Use for macOS code review, best practices, UI review, or platform-specific features.

ios-development

rshankras/claude-code-apple-skills

Comprehensive iOS development guidance including Swift best practices, SwiftUI patterns, UI/UX review against HIG, and app planning. Use for iOS code review, best practices, accessibility audits, or planning new iOS apps.

Mobile823 installs

design

rshankras/claude-code-apple-skills

Design skills for Apple platform UI — Liquid Glass, animations, game feel (haptics, sound, celebrations), UI prototyping, UX writing, SF Symbols, and typography. Use when implementing design language features, adding juice/feedback, writing interface copy, or choosing type and iconography.

Frontend & Design680 installs

app-store

rshankras/claude-code-apple-skills

App Store optimization and marketing skills for descriptions, screenshots, keywords, review responses, and comprehensive promotional strategy. Use when user needs help with App Store presence, ASO, marketing, or customer communication.

Mobile599 installs

watchos

rshankras/claude-code-apple-skills

watchOS development guidance including SwiftUI for Watch, Watch Connectivity, complications, and watch-specific UI patterns. Use for watchOS code review, best practices, or Watch app development.

product-development

rshankras/claude-code-apple-skills

End-to-end product development for iOS/macOS apps. Covers market research, competitive analysis, PRD generation, architecture specs, UX design, implementation guides, testing, and App Store release. Use for product planning, validation, or generating specification documents.

Testing & QA554 installs

Popular mobile skills

View category →

design-mobile-apps

designed-by-ai/skills

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML.

Mobile1.1M installs

ios-design

uizze.sh

Design and review iOS UI/UX for iPhone apps in SwiftUI, UIKit, or React Native. Use for mobile app design, screen redesigns, navigation flows, typography, forms, keyboard and safe-area layout, and accessibility checks. Apply Apple Human Interface Guidelines and consult real product references through the optional Uizze connection.

Mobile416.5K installs

vercel-react-native-skills

vercel-labs/agent-skills

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

OfficialMobile256.7K installs

animate-expo

emilkowalski/skills

Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use animate.

Mobile140.1K installs

xcode-project-setup

firebase/agent-skills

Safely modifies Xcode projects (.pbxproj) to add Swift Packages and link files. Use this skill whenever an iOS project needs dependencies installed (e.g. Firebase, Alamofire).

OfficialMobile131.2K installs

firebase-remote-config-basics

firebase/agent-skills

Manages Firebase Remote Config templates, feature flags, loading strategies, and SDKs (Android, iOS). Use when downloading/deploying remoteconfig JSON templates, managing version history/feature flags, setting in-app defaults, fetchAndActivate(), real-time listeners, or SDK setup. Don't use for Firebase Hosting, Auth, Firestore, Data Connect, Crashlytics, or App Hosting.

OfficialMobile121.7K installs