skills/sgds-writing/SKILL.md
Writing style guide for the Singapore Government Design System (SGDS). Use when writing or reviewing UI copy, documentation, labels, error messages, tooltips, or any content that accompanies SGDS components. Covers tone, grammar, spelling, casing, punctuation, and plain language principles.
npx skillsauth add govtechsg/sgds-web-component sgds-writingInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Content standards for government digital products built with the Singapore Government Design System. Apply these rules to all UI copy, documentation, tooltips, labels, error messages, and any written content that accompanies SGDS components.
Write as a trusted, competent partner — not as a bureaucracy. GovTech's voice is:
Avoid corporate jargon ("leverage", "synergise", "holistic approach"), hollow intensifiers ("very", "extremely", "crucial"), and vague forward-looking language ("innovative", "cutting-edge", "future-proof") unless the context genuinely calls for them.
Preferred: We help agencies share data securely. Avoid: We leverage cutting-edge, innovative solutions to holistically enable seamless data exchange across government agencies.
Use UK English spelling throughout.
| UK (correct) | US (avoid) | |---|---| | colour | color | | centre | center | | programme | program (unless referring to software) | | organisation | organization | | recognise | recognize | | analyse | analyze | | catalogue | catalog | | licence (noun) | license (noun) | | license (verb) | licence (verb) | | travelled | traveled | | fulfil | fulfill | | practise (verb) | practice (verb) | | practice (noun) | practise (noun) |
Spell-check setting: set your editor and CI spell checker to
en-GB. In VS Code, set"editor.language": "en-GB"or use the Spell Right extension with"spellright.language": ["en-GB"].
See → reference/spelling.md for a full word list.
Use sentence case for all headings, labels, button text, navigation items, error messages, and body copy — unless a rule below explicitly overrides it.
Sentence case means: capitalise the first word and proper nouns only.
Correct:
Incorrect (title case):
Do not use the em dash (—) under any circumstances. It creates visual noise and is often misread or skipped by screen readers.
Alternatives:
| Instead of | Use | |---|---| | The form — which is required — must be submitted by Friday. | The form, which is required, must be submitted by Friday. | | Submit before Friday — or your application will lapse. | Submit before Friday. Otherwise, your application will lapse. | | Three options — email, phone, or in person — are available. | Three options are available: email, phone, or in person. |
Use a colon, comma pair, or a new sentence. Never an em dash.
Use the Oxford comma (serial comma) in lists of three or more items.
Correct: You will need your NRIC, passport, and proof of address. Incorrect: You will need your NRIC, passport and proof of address.
Prefer active voice. The subject acts; it is not acted upon.
Active: The system sends a confirmation email. Passive: A confirmation email is sent by the system.
Passive voice is acceptable when the actor is unknown, irrelevant, or less important than the action: "Your data is encrypted at rest."
Do not use contrastive negation — the pattern "not X, but Y" or "not only X but also Y". It adds a negation step that slows reading.
Avoid:
Preferred:
Aim for sentences under 20 words. If a sentence needs a clause to clarify another clause, split it into two sentences.
Items in a list, heading pairs, and button labels must follow the same grammatical form.
Correct (all verb phrases):
Incorrect (mixed forms):
Do not use contractions in any content. Write out the full form at all times.
Correct: You do not need to create an account. Incorrect: You don't need to create an account.
Correct: We have updated the interface. Incorrect: We've updated the interface.
Note: This is a deliberate departure from most product design system guides. GOV.UK, Canada.ca, Shopify Polaris, and Apple HIG all recommend using contractions on the grounds that they sound more natural. We avoid them to maintain formal, consistent language appropriate for official Singapore Government products, and to eliminate ambiguity (for example, "it's" vs "its").
Use modal verbs precisely. The wrong choice creates unintended legal obligations or false reassurances.
| Word | When to use | Example | |---|---|---| | Must | Legal obligation — the user has no choice | You must submit the form by 31 January. | | Need to | An administrative step the user is expected to complete | You need to verify your email before signing in. | | Should | A recommendation — the user is advised but not obligated | You should save your progress regularly. | | May | Permitted but optional | You may attach supporting documents. |
Do not use "must" for administrative steps — it implies a legal consequence that may not exist. Do not use "should" when the step is actually required.
Correct: The file is too large. Upload a file under 5 MB. Incorrect: You uploaded a file that is too large. Please upload a smaller file.
Correct: No applications yet. Start your first application. Incorrect: Nothing here.
Label: Date of birth Helper text: Use DD/MM/YYYY format Not: Enter your date of birth in DD/MM/YYYY format
| Topic | File | |---|---| | UK vs US spelling word list | → reference/spelling.md | | Grammar rules quick reference | → reference/grammar.md | | Punctuation quick reference | → reference/punctuation.md | | Word choice and plain language | → reference/word-choice.md |
tools
Complete reference for all SGDS web components including installation and framework integration. Use when users ask about any <sgds-*> component — accordion, alert, badge, breadcrumb, button, card, checkbox, close-button, combo-box, datepicker, description-list, divider, drawer, dropdown, file-upload, footer, icon, icon-button, icon-card, icon-list, image-card, input, link, mainnav, masthead, modal, overflow-menu, pagination, progress-bar, quantity-toggle, radio, select, sidebar, sidenav, skeleton, spinner, stepper, subnav, switch, system-banner, tab, table, table-of-contents, textarea, thumbnail-card, toast, or tooltip. Also covers React 19+, React ≤18, Vue, Angular, and Next.js integration.
testing
Use this skill when users ask about form validation in SGDS, hasFeedback prop, constraint validation, custom validation, noValidate, setInvalid, form submission, or reading FormData from SGDS form components.
tools
Complete catalog of page layout patterns for SGDS applications. Use this skill whenever a user asks about page layouts, content arrangement, aside panels, split views, sidebar layouts, breadcrumb layouts, or viewport-height layouts — even if they just say 'how should I lay out my page' or 'I need a two-column layout'. Covers Full Width layouts (public-facing pages with sgds-container) and With Sidebar layouts (dashboards/internal tools with sgds-container-sidebar). Trigger on: layout, aside, split view, sidebar layout, two-column, three-column, content arrangement, page structure with aside.
tools
Complete ready-to-use page templates built with SGDS components and utilities. Use this skill whenever a user asks to build a page, dashboard, login page, form page, settings page, list page, or any full-page UI — even if they don't say 'template'. Apply when starting a new app, building internal tools, dashboards, admin portals, authentication flows, or data table views.