I had only the prompt's description of Oak's design system (a styles.css stylesheet) with no access to the actual file, so I could not look up real token names or exact colour values. I wrote plain, generic CSS satisfying the literal requirements (grey background, rounded corners, padding, left yellow accent bar) using placeholder hex values rather than inventing specific Oak brand colours or token names I had no basis for. I flagged the placeholders explicitly, suggested a CSS custom-propert...
Installs into .claude/skills of the current project.
Are you the author of Transcripts?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/oaknational-transcripts-02ef892b)
I had only the prompt's description of Oak's design system (a styles.css stylesheet) with no access to the actual file, so I could not look up real token names or exact colour values. I wrote plain, generic CSS satisfying the literal requirements (grey background, rounded corners, padding, left yellow accent bar) using placeholder hex values rather than inventing specific Oak brand colours or token names I had no basis for. I flagged the placeholders explicitly, suggested a CSS custom-property pattern in case the stylesheet exposes design tokens, offered an alternate corner-rounding variant for the accent-bar case, and asked the user to supply real token names/hex values to finish the job — rather than presenting guessed values as authoritative Oak styling.
