orange-opensource/ouds-ios/ouds-ios-framework-usage
Claude Code and agent skill by orange-opensource/ouds-ios
- community
Checking that the SKILL.md file is still in the repository.
Setup and general usage of the OUDS iOS framework — imports, themes, token namespaces, view modifiers, image rules, shared control patterns and custom font registration. Load this first; then load the matching `ouds-ios-components-*` skill for a specific component family (actions, content-display, controls, dialogs, foundations, indicators, layouts, navigations).
Install
npx vskill@latest install orange-opensource/ouds-ios/ouds-ios-framework-usageSKILL.md
OUDS Framework Usage
1. Basic setup
2. Imports
Can import internal modules, but for developer experience there are umbrella products:
| Product | Themes | When | |
|---|---|---|---|
OUDSSwiftUI | All | Default | |
OUDSSwiftUIOrange | Orange + OrangeCompact | Orange apps only | |
OUDSSwiftUIOrangeSosh | Orange + Sosh | Multi-brand | |
OUDSSwiftUIWireframe | Wireframe | Prototyping | |
OUDSSwiftUIWhiteLabel | WhiteLabel | White label or gray label branded apps |
Internal modules: OUDSComponents, OUDSTokensRaw, OUDSTokensSemantic, OUDSTokensComponent, OUDSThemesOrange, OUDSThemesSosh, OUDSFoundations, etc.
3. Themes
Available: OrangeTheme, OrangeCompact, SoshTheme, WireframeTheme, WhiteLabel.
4. Token namespaces
| Namespace | Content | |
|---|---|---|
theme.colors | Color semantic tokens | |
theme.colorModes | Color-mode tokens (for OUDSColoredSurface) | |
theme.borders | Border style / width / radius | |
theme.fonts | Typography | |
theme.sizes | Sizes | |
theme.spaces | Spacing | |
theme.dimensions | Dimensions | |
theme.elevations | Shadows / elevation | |
theme.grids | Grid | |
theme.opacities | Opacity | |
theme.effects | Visual effects |
5. View modifiers
For Shape types, use fill(_:style:) with a color token — the light/dark variant is resolved automatically:
6. Images in OUDS components
Never call SwiftUI modifiers on an `Image` that is wrapped in an `OUDSImage` and passed to an OUDS component.
OUDS components accept an OUDSImage (which wraps the bare SwiftUI Image with its flip flag, accessibility label and rendering mode), through parameters named image:. Calling any modifier on the Image (including .accessibilityHidden(true)) changes its type to some View and produces a compile error.
The component handles the accessibility of its own images internally. You must not alter them from the call site.
Never do this:
Always do this — pass a bare `Image` inside `OUDSImage`, swiftlint comment on the line before:
The // swiftlint:disable:next accessibility_label_for_image comment must appear on the line immediately before the component call, never on the line of the Image(...) itself.
Exception: Image(decorative: "name") suppresses the linter rule automatically and needs no comment.
7. Registering custom fonts
To use a custom font family with OUDS, two steps are required after adding the TTF files to your project:
Step 1 — Register the font files (Core Text, call once at app startup):
Step 2 — Register PostScript names for each family + weight combination you use:
kApplePostScriptFontNames exposes the full map (read-only). OUDS uses it internally to resolve Font objects from theme font tokens. Unregistered combinations fall back to the family name without spaces.
8. Styled AttributedString with hyperlinks
OUDS provides utilities to create styled AttributedString from plain text or Markdown, with custom styling for links based on their text or URL.
Font tokens (e.g. theme.fonts.bodyDefaultMedium) are MultipleFontCompositeSemanticToken values, not SwiftUI Font. Convert them with Font.makeFont(family:from:isCompact:) before using them in AttributedStringUrlConfiguration or AttributedString.from(...).
Basic usage — Markdown
Basic usage — plain text
Use AttributedString.from(text:foregroundColor:font:urlConfigurations:) when the text and the words to turn into hyperlinks are known upfront (no Markdown syntax). Each configuration must provide both text and urlToOpen, otherwise it is ignored:
A LocalizedStringKey-based overload is also available: AttributedString.from(_:tableName:bundle:foregroundColor:font:urlConfigurations:). AttributedStringUrlConfiguration also has a LocalizedStringKey-based initializer: AttributedStringUrlConfiguration(_:tableName:bundle:urlToOpen:color:font:).
Foreground color only (no hyperlinks)
If you only need to apply a color to a whole text or Markdown source (no custom font, no hyperlink styling), use the simpler overloads:
Each of these also has a ColorSemanticToken-based overload, e.g. AttributedString.from(text:foregroundColor: ColorSemanticToken).
Configuration options
| Initializer | Use case | |
|---|---|---|
AttributedStringUrlConfiguration(text:urlToOpen:color:font:) | Match by text and URL, set custom URL. Required form for AttributedString.from(text:...) | |
AttributedStringUrlConfiguration(text:color:font:) | Match by text only (URL taken from Markdown). Only usable with AttributedString.from(markdown:...) | |
AttributedStringUrlConfiguration(urlToOpen:color:font:) | Match by URL only. Only usable with AttributedString.from(markdown:...) | |
AttributedStringUrlConfiguration(color:font:) | Default fallback for any unmatched link. Only usable with AttributedString.from(markdown:...) |
Matching priority (Markdown only)
For each hyperlink found in the Markdown source, the first configuration in the urlConfigurations array that matches (by URL or by text) is applied:
- Configurations are scanned in array order; the first one whose
urlToOpenmatches the link's URL, or whosetextmatches the link's text, wins. - If no configuration matches, the default configuration (the one with no
textand nourlToOpen) is applied, if any. - If neither matches, a warning is logged and the base
foregroundColor/fontstyle is kept.
AttributedString.from(text:...) does not use this fallback logic: only configurations with both text and urlToOpen set are applied, matched by exact text.
10. AsyncImage — cached image loading
`OUDSAsyncImage is a cached version of SwiftUI/AsyncImage`. It loads images from URLs and caches them in memory (100MB) and on disk (500MB).
This is the start of the file. Read the full SKILL.md on GitHub.
Security
- Security scanPassed, 100 of 100Pattern checks on the skill's files.
- Model reviewNot runA model review is scheduled for the next rescan.
Quality evaluation
- Task evaluationNot runNo evaluation yet. Run one in Skill Studio.
Source
- SKILL.md in the repositoryCheckingskills/ouds-ios-framework-usage/SKILL.md
Popularity
- Repository stars
- 34
- Repository forks
- 9
- 7-day trend score
- 18
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
[](https://verified-skill.com/skills/orange-opensource/ouds-ios/ouds-ios-framework-usage)